/reactjs-infinite-carousel

ReactJS Component to create an infinite carousel with ajustable size

Primary LanguageTypeScriptOtherNOASSERTION

reactjs-infinite-carousel

· GitHub license npm version

Instalation

This is a React component to have an infinite carousel

To install the lib run one of the following commands according to your package manager;

yarn add reactjs-infinite-carousel

or

npm i reactjs-infinite-carousel

Usage

To use the component, you need a list of objects like the following structure;

image_url is also key prop for map

const list = [
  {
    image_url:
      "https://avatars0.githubusercontent.com/u/54731808?s=460&u=f1dd2199406981cedca881fca032889be8408878&v=4",
  },
  {
    image_url:
      "https://avatars0.githubusercontent.com/u/54731808?s=460&u=f1dd2199406981cedca881fca032889be8408878&v=4",
  },
  {
    image_url:
      "https://avatars0.githubusercontent.com/u/54731808?s=460&u=f1dd2199406981cedca881fca032889be8408878&v=4",
  },
];

And place the Carousel component inside another element, (this element will controll the size of carousel);

import Carousel from "reactjs-infinite-carousel";
// ...
<div style={{ height: "200px", width: "100%" }}>
  <Carousel images={list} />
</div>;

As optional, you can pass an autoPlay prop that is in seconds to change each image;

<Carousel images={list} autoPlay={1} />;
// Intervals of 1 second

If you want to customize your components and data attributes, you can pass CustomComponent as argument, the carousel will automatically call this component to each image in the list, This component must recieve a item prop that has the same shape of IImageItem;

function CustomSlide({ item: { image_url } }) {
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        background: `url(${image_url}) center no-repeat`,
        backgroundSize: "cover",
      }}
    />
  );
}

function App() {
  return <Carousel images={list} CustomComponent={CustomSlide} />;
}

Using Typescript

In TypeScript you can import the IImageItem interface;

import { Carousel, IImageItem } from "reactjs-infinite-carousel";

...
const list:IImageItem[]=[
  {
    image_url:'https://avatars0.githubusercontent.com/u/54731808?s=460&u=f1dd2199406981cedca881fca032889be8408878&v=4'
  },
]
...

This Carousel make type checking comparing the shape of list and Data recieved of CustomSlide, in item prop, has a prop called data at the shape of the generics recieved in IImageItem<T>;

type ItemProps = {
  name: string;
  age: number;
};

type CustomProps = IImageItem<ItemProps>;

function CustomSlide({ item: { image_url } }: CustomProps) {
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        background: `url(${image_url}) center no-repeat`,
        backgroundSize: "cover",
      }}
    />
  );
}

const list: CustomProps[] = [];

function App() {
  return <Carousel images={list} CustomComponent={CustomSlide} />;
}

All props

Prop Meaning Type
images Data list IImageItem<T>
CustomComponent Custom Component For eacth item React.FC<{ item: IImageItem<T> }>
Arrows Custom Components for left and right Arrows {
left: React.FC<{ handleClick: () => void }>;
right: React.FC<{ handleClick: () => void }>;
}
CustomDots Custom Component for Dots React.FC<IDotsProps<T>>
desactiveDots disable dots boolean
desactiveArrows disable arrows boolean
autoPlay time in seconds for autoplay number
activeColor color in Dot when is respective element is in view string
defaultColor color in Dot string
keyExtractor Function to defines key in each element (item: IImageItem<T>) => React.Key 
keyExtractor?: (item: IImageItem<T>) => React.Key;