1.0.2 • Published 3 years ago
react-ig-indicator v1.0.2
react-ig-indicator
An Instagram-like page indicator component.
Installation
# npm
npm i react-ig-indicator
# yarn
yarn add react-ig-indicatorPrerequisite
react@16.8.0 (the one with hook) and aboveQuick start
import Carousel from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Indicator from "react-ig-indicator";
export default function MyCarousel() {
const images = [
"https://wallpaperaccess.com/full/2989884.jpg",
"https://i.pinimg.com/originals/74/c6/bd/74c6bd677d433a565b2e142207623533.png",
"https://pbs.twimg.com/profile_images/1383424793035231240/AHMq2F9e_400x400.jpg",
"https://i.pinimg.com/originals/e9/51/fb/e951fb9ba3fa130ca4f672c29379ae88.jpg",
];
const [currentPage, setCurrentPage] = useState(0);
return (
<div className="App">
<Carousel
className="slide"
beforeChange={(_, newIndex) => setCurrentPage(newIndex)}
>
{images.map((imgUrl) => (
<div>
<img alt="" src={imgUrl} />
</div>
))}
</Carousel>
<Indicator
totalAmount={images.length}
activeIndex={currentPage}
wrapperStyleClass="dot-container"
activeDotColor="#abc"
dotColor="#111"
/>
</div>
);
}Props
| Property | Description | Default value | Type | Required |
|---|---|---|---|---|
totalAmount | total amount of dots | 0 | number | yes |
activeIndex | index of the active dot (zero based) | 0 | number | |
dotSize | width and height of the dot (in pixels) | 6 | number | |
dotColor | color of the dot (#hex code) | "#a8a8a8" | string | |
activeDotColor | color of the active dot (#hex code) | "#0095f6" | string | |
dotSpacing | spacing between dots | 4 | number | |
wrapperStyleClass | custom CSS class name for the wrapper element of Indicator | string | ||
renderDot | a render props that is called with an object containing the following dot related properties: spacing, position, scaleRatio, size and color | function |
License
MIT © CR Jimmy