react-slip-and-slide
Version:
##### A react and react-native carousel
108 lines (91 loc) • 10.1 kB
Markdown
# react-slip-and-slide
##### A react and react-native carousel
<img src="https://media.giphy.com/media/xX1jzTGlknCM5xSsI2/giphy.gif" alt="example" style="width: 800px"/>
## Props
| Prop | Type | Description |
| -------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | `ReactSlipAndSlideRef` | Instance reference that allow some external controls |
| data | `T[]` | The shape data will be inferred from usage |
| snap | `boolean?` | Turns on offset snapping |
| centered | `boolean?` | Centers the items on the container |
| infinite | `boolean?` | Turns on infinite looping |
| pressToSlide | `boolean?` | Allows navigation when the next/prev item is pressed |
| animateStartup | `boolean?` | If true the slider will have an opacity transition when mounted. (can be useful to hide initial setup when itemWidth and/or itemHeight are not provided) |
| containerWidth | `number?` | The width of the items parent node (defaults to the width of the grand parent if undefined node) |
| overflowHidden | `boolean?` | Allows the items to be visible when overflowing the parent container |
| fullWidthItem | `boolean?` | If true the items will assume the width of it's container. Useful if you leave `containerWidth` undefined to force it to fallback to 100%. The containerWidth will be measured for you and them `containerWidth` and `itemWidth` will be the same |
| animateStartup | `boolean?` | Animates opacity on start up |
| itemWidth | `number?` | The width of the items |
| itemHeight | `number?` | The height of the items |
| interpolators | `[key in keyof CSSProperties]: number / undefined` | Allows you to define custom interpolation effects. For example, if opacity: 0.3, all items but the current will have opacity of 0.3, while the current will have 1. Be reasonable with this one as i'm not validating the properties |
| rubberbandElasticity | `number?` | The amount of elasticity when dragging beyond the container edges |
| visibleItems | `number?` | The amount of rendered items at the same time |
| useWheel | `boolean?` | Allows you to control the slide gesture with the trackpad or mouse wheel |
| momentumMultiplier | `number?` | Controls how much momentum the release will have when snap if false. To prevent bad UX the expected range is between 0 and 1 |
| renderItem | `(props: RenderItemProps<T>) => JSX.Element` | A function that have access to index and item props and returns a JSX.Element |
| onChange | `onChange?: (index: number) => void` | A callback that's fired when the index changes |
| onEdges | `onEdges?: (props: {start: boolean; end: boolean;}) => void` | A callback that's fired when the offset reaches both the start or end edges |
| onReady | `onReady?: (ready: boolean) => void` | `onReady` fires immediately if `animateStartup` is set to `true` otherwise it fires after the setup phase |
## Instance Ref
| Handler | Description |
| ------- | -------------------------------------------------------------------------- |
| next | Go to next slide |
| next | Go to previous slide |
| goTo | Go to some index with an animation or not |
| move | Move the offset by the pixels provided (-x goes forward, x goes backwards) |
```jsx
const data = [
{
label: "Lorem",
},
{
label: "Ipsum",
},
...
];
function App() {
const ref = React.useRef<ReactSlipAndSlideRef>(null);
const prev = () => ref.current?.previous();
const next = () => ref.current?.next();
return (
<div className="App">
<ReactSlipAndSlide
ref={ref}
data={data}
snap
centered
infinite
pressToSlide
itemWidth={420}
itemHeight={400}
interpolators={{
opacity: 0.3,
scale: 0.9,
}}
renderItem={({ index, item }) => {
return (
<img
style={{ borderRadius: 80 }}
src={`https://picsum.photos/seed/${index * 2}/400`}
alt={item.label}
/>
);
}}
/>
</div>
);
}
```
> Important! In order to get Android to work properly, you need to wrap your app with [GestureHandlerRootView](https://docs.swmansion.com/react-native-gesture-handler/docs/installation#js).
```jsx
function App() {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<ReactSlipAndSlide />
</GestureHandlerRootView>
);
}
```
[Check out some examples](https://react-slip-and-slide.netlify.app/)
## License
Licensed under the terms of the [MIT License](https://opensource.org/licenses/MIT).