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-carouselor
npm i reactjs-infinite-carouselTo use the component, you need a list of objects like the following structure;
image_urlis 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 secondIf 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} />;
}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} />;
}| 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;