Skip to content

docs: Interactive code examples #546

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MatiPl01 merged 8 commits into from
Feb 12, 2026
Merged

docs: Interactive code examples #546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8ec9344
Add interactive examples to docs
MatiPl01 Feb 12, 2026
8f462c7
Add code higlighting
MatiPl01 Feb 12, 2026
9ddaedd
Attempt to fix build issues
MatiPl01 Feb 12, 2026
8952853
Update lockfile
MatiPl01 Feb 12, 2026
8db4e59
Revert gradle file changes
MatiPl01 Feb 12, 2026
c63ab9f
Dedupe more deps
MatiPl01 Feb 12, 2026
88b20e1
Bump deps
MatiPl01 Feb 12, 2026
87e7ced
Little improvements of code highlighting
MatiPl01 Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/docs/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
plugins: ['react-native-worklets/plugin'],
presets: [require.resolve('@docusaurus/core/lib/babel/preset')]
};
97 changes: 9 additions & 88 deletions packages/docs/docs/grid/examples/active-item-portal.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,96 +11,17 @@ This example demonstrates how to use the active item portal to render the active

In this case, the `PortalProvider` is used to render the active item outside of the `ScrollView` content bounds. This is the only way to render only the active item without cropping it whilst keeping the rest of the grid within the `ScrollView` content bounds.

## Source Code
## Example

```tsx
import { useCallback, useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Animated, { useAnimatedRef } from 'react-native-reanimated';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';
import InteractiveExample from '@site/src/components/InteractiveExample';
import ActiveItemPortalExample from '@site/src/examples/ActiveItemPortal';
import ActiveItemPortalCode from '!!raw-loader!@site/src/examples/ActiveItemPortal';

const DATA = Array.from({ length: 18 }, (_, index) => `Item ${index + 1}`);

export default function Example() {
const [portalEnabled, setPortalEnabled] = useState(false);
const scrollableRef = useAnimatedRef<Animated.ScrollView>();

const renderItem = useCallback<SortableGridRenderItem<string>>(
({ item }) => (
<View style={styles.card}>
<Text style={styles.text}>{item}</Text>
</View>
),
[]
);

return (
<View style={styles.container}>
{/* highlight-start */}
<Sortable.PortalProvider enabled={portalEnabled}>
{/* highlight-end */}
<View style={styles.gridContainer}>
<Animated.ScrollView
contentContainerStyle={styles.contentContainer}
ref={scrollableRef}>
<Sortable.Grid
columnGap={10}
columns={3}
data={DATA}
renderItem={renderItem}
rowGap={10}
scrollableRef={scrollableRef}
/>
</Animated.ScrollView>
</View>
<Pressable onPress={() => setPortalEnabled(prev => !prev)}>
<Text
style={
styles.buttonText
}>{`${portalEnabled ? 'Disable' : 'Enable'} Portal`}</Text>
</Pressable>
{/* highlight-start */}
</Sortable.PortalProvider>
{/* highlight-end */}
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#DDE2E3'
},
gridContainer: {
margin: 15,
borderRadius: 10,
height: 400,
backgroundColor: '#FFFFFF'
},
card: {
alignItems: 'center',
backgroundColor: '#36877F',
borderRadius: 10,
height: 100,
justifyContent: 'center'
},
contentContainer: {
padding: 10
},
text: {
color: 'white',
fontWeight: 'bold'
},
buttonText: {
color: '#36877F',
fontSize: 18,
fontWeight: 'bold'
}
});
```
<InteractiveExample
component={ActiveItemPortalExample}
code={ActiveItemPortalCode}
metastring='{24,43}'
/>

## Result

Expand Down
64 changes: 6 additions & 58 deletions packages/docs/docs/grid/examples/auto-scroll.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,65 +9,13 @@ description: ''

This example demonstrates how to use the **auto scroll** feature of the **SortableGrid** component.

## Source Code
## Example

```tsx
import { useCallback } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated, { useAnimatedRef } from 'react-native-reanimated';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';

const DATA = Array.from({ length: 30 }, (_, index) => `Item ${index + 1}`);

export default function Example() {
const scrollableRef = useAnimatedRef<Animated.ScrollView>();

const renderItem = useCallback<SortableGridRenderItem<string>>(
({ item }) => (
<View style={styles.card}>
<Text style={styles.text}>{item}</Text>
</View>
),
[]
);

return (
<Animated.ScrollView
contentContainerStyle={styles.contentContainer}
ref={scrollableRef}>
<Sortable.Grid
columnGap={10}
columns={3}
data={DATA}
renderItem={renderItem}
rowGap={10}
scrollableRef={scrollableRef} // required for auto scroll
// autoScrollActivationOffset={75}
// autoScrollSpeed={1}
// autoScrollEnabled={true}
/>
</Animated.ScrollView>
);
}

const styles = StyleSheet.create({
card: {
alignItems: 'center',
backgroundColor: '#36877F',
borderRadius: 10,
height: 100,
justifyContent: 'center'
},
contentContainer: {
padding: 10
},
text: {
color: 'white',
fontWeight: 'bold'
}
});
```
import InteractiveExample from '@site/src/components/InteractiveExample';
import AutoScrollExample from '@site/src/examples/AutoScroll';
import AutoScrollCode from '!!raw-loader!@site/src/examples/AutoScroll';

<InteractiveExample component={AutoScrollExample} code={AutoScrollCode} />

## Result

Expand Down
63 changes: 5 additions & 58 deletions packages/docs/docs/grid/examples/custom-handle.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,66 +9,13 @@ description: ''

The **Custom Handle** example demonstrates how to use a custom item drag handle.

## Source Code
## Example

```tsx
import { faGripVertical } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { useCallback } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';
import InteractiveExample from '@site/src/components/InteractiveExample';
import CustomHandleExample from '@site/src/examples/CustomHandle';
import CustomHandleCode from '!!raw-loader!@site/src/examples/CustomHandle';

const DATA = Array.from({ length: 8 }, (_, index) => `Item ${index + 1}`);

export default function Example() {
const renderItem = useCallback<SortableGridRenderItem<string>>(
({ item }) => (
<View style={styles.card}>
<Text style={styles.text}>{item}</Text>
{/* Wraps the handle component (an icon in this case) */}
<Sortable.Handle>
<FontAwesomeIcon color='white' icon={faGripVertical} />
</Sortable.Handle>
</View>
),
[]
);

return (
<View style={styles.container}>
<Sortable.Grid
activeItemScale={1.05}
columns={1}
data={DATA}
overDrag='vertical'
renderItem={renderItem}
rowGap={10}
customHandle // must be set to use a custom handle
/>
</View>
);
}

const styles = StyleSheet.create({
card: {
alignItems: 'center',
backgroundColor: '#36877F',
borderRadius: 12,
flexDirection: 'row',
justifyContent: 'center',
padding: 24
},
container: {
padding: 16
},
text: {
color: 'white',
flex: 1,
fontWeight: 'bold'
}
});
```
<InteractiveExample component={CustomHandleExample} code={CustomHandleCode} />

## Result

Expand Down
60 changes: 8 additions & 52 deletions packages/docs/docs/grid/examples/different-item-heights.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,60 +11,16 @@ This example shows that the **Sortable Grid** component can handle **different i

Similar to the **Sortable Grid** component, the **Sortable Flex** component can also handle **different item heights**.

## Source Code
## Example

```tsx
import { useCallback } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';
import InteractiveExample from '@site/src/components/InteractiveExample';
import DifferentHeightsExample from '@site/src/examples/DifferentHeights';
import DifferentHeightsCode from '!!raw-loader!@site/src/examples/DifferentHeights';

const DATA = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);

export default function Example() {
const renderItem = useCallback<SortableGridRenderItem<string>>(
({ item }) => (
<View
style={[
styles.card,
{ height: Math.random() * 150 + 50 } // random height for demo purposes
]}>
<Text style={styles.text}>{item}</Text>
</View>
),
[]
);

return (
<View style={styles.container}>
<Sortable.Grid
columnGap={10}
columns={3}
data={DATA}
renderItem={renderItem}
rowGap={10}
/>
</View>
);
}

const styles = StyleSheet.create({
card: {
alignItems: 'center',
backgroundColor: '#36877F',
borderRadius: 10,
height: 100,
justifyContent: 'center'
},
container: {
padding: 10
},
text: {
color: 'white',
fontWeight: 'bold'
}
});
```
<InteractiveExample
component={DifferentHeightsExample}
code={DifferentHeightsCode}
/>

## Result

Expand Down
Loading
Loading