react-slip-and-slide

A react and react-native carousel

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

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.

function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ReactSlipAndSlide />
    </GestureHandlerRootView>
  );
}

Check out some examples

License

Licensed under the terms of the MIT License.