README
Carousel built using react-hooks.
react-hooks-carousel is a react package for carousel built using react-hooks.
Installation
npm install react-hooks-carousel
Usage
import ReactHooksCarousel from 'react-hooks-carousel';
function Carousel() {
return (
<ReactHooksCarousel />
);
}
Props
Property | Description | Default | Accepted Values |
---|---|---|---|
pictures | Image urls that needs to be rendered in carousel | array of image urls | |
height | Height of carousel | 350px | any value with unit |
width | Width of carousel | 500px | any value with unit |
styleProp | define styles for images in carousel | react style object | |
altProp | alt attribute for images | 'Cannot Load' | string |
disableAutoPlay | true if want to stop autoplay initially | false | true / false |
Example with props
import ReactHooksCarousel from 'react-hooks-carousel';
function Carousel() {
return (
<ReactHooksCarousel
height="150px"
width="350px"
styleProp={{ borderRadius: "50px", border: "1px solid" }}
pictures={[
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKHdDcqk90c1t8gxqSJowecXCBt1Xx4hxbRbkgSG55snmAsdsFww",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGb8wtRT8-N0IcXnOyKIFhS7KXCLP4IEdxis8omLyuErz3kWnkbw",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCo6Itcx8wc4IsjusLxnkhAUAoLH8ceqzKwOBnicDJvk5epHcY"
]}
/>
);
}