diff --git a/README.md b/README.md index 48a26ca..ae8abb4 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ export function Example() { | name | description | required | type | default | | ---------------------- | ------------------------------------------------------------------------------------------------------------ | -------- | ------------------------------- | ------------- | | `children` | Any component that you'd like to apply infinite scrolling / marquee effect | YES | `React.ReactNode` | 1 | +| `enabled` | Enable stagger animation | NO | `boolean` | true | | `stagger` | Stagger duration between elements | NO | `number` | 50 | | `duration` | Enter/Exit animation duration | NO | `number` | 400 | | `enterDirection` | The direction of the animation. `1 -> top to bottom`, `-1 -> bottom to top` | NO | `number` | 0 | diff --git a/src/index.tsx b/src/index.tsx index 9f13466..5349e2c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -15,6 +15,10 @@ import Animated, { } from 'react-native-reanimated'; export type StaggerProps = React.PropsWithChildren<{ + enabled?: boolean; + /** + * to enable or disable the stagger animation + */ stagger?: number; /** * The direction of the enter animation. @@ -72,6 +76,7 @@ export type StaggerProps = React.PropsWithChildren<{ }>; export function Stagger({ children, + enabled = true, stagger = 50, enterDirection = 1, exitDirection = -1, @@ -88,6 +93,10 @@ export function Stagger({ return null; } + if (!enabled) { + return {children}; + } + return ( {React.Children.map(children, (child, index) => { @@ -142,4 +151,4 @@ export function Stagger({ })} ); -} +} \ No newline at end of file