@simonpatrat/react-roll
v1.2.2
Published
Simple carousel components for React
Downloads
39
Readme
React Roll
Simple carousel component for React
Storybook demo.
How to use
npm i @simonpatrat/react-roll
or
yarn add @simonpatrat/react-roll
Basic usage
import React from "react";
import { Carousel } from "@simonpatrat/react-roll";
export default function MyCarousel() {
return (
<Carousel>
{/* Each child is now a Slide */}
<div>Hello</div>
<div>World</div>
<div>I am a slide</div>
</Carousel>
);
}
Advanced usage
import React from "react";
import { Carousel } from "@simonpatrat/react-roll";
export default function MyCarousel() {
return (
<Carousel
autoFocus
className="my-carousel"
locale="en"
numVisibleSlides={4}
onChangeSlide={() => {}}
responsive={{
768: {
numVisibleSlides: 1,
paddingRight: "30%",
},
1024: {
numVisibleSlides: 2,
paddingRight: "20%",
},
1366: {
numVisibleSlides: 3,
},
}}
slidePadding="8px"
>
{/* Each child is now a Slide */}
<div>Hello</div>
<div>World</div>
<div>I am a slide</div>
</Carousel>
);
}
Todo
- [ ] Better documentation on props (see storybook docs)
- [ ] Async Slide Component
- [ ] Improve Control buttons (positioning)
- [x] Typescript
- [x] scss support
- [x] Storybook
- [x] Full size option
- [x] Infinite slides option
- [x] Scrollable carousel option
- [x] Tests