npm.io
1.0.2 • Published 5 years ago

react-ig-indicator

Licence
MIT
Version
1.0.2
Deps
0
Size
11.9 MB
Vulns
0
Weekly
0
Stars
3
SummaryDependencyVersions

react-ig-indicator

Node.js CI

react-ig-indicator-demo

An Instagram-like page indicator component.

Installation

# npm
npm i react-ig-indicator

# yarn
yarn add react-ig-indicator

Prerequisite

react@16.8.0 (the one with hook) and above

Quick 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

Keywords

reactcomponentindicatorinstagram