@react-slip-and-slide/native

react-slip-and-slide

npm i react-slip-and-slide

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)
itemWidth	number?	The width of the items
itemHeight	number?	The height of the items
interpolators	[key in keyof CSSProperties]: number	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.
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)

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>
  );
}

License

Licensed under the terms of the MIT License.