React dots for any slider

Live Demo

Installation:

npm install react-any-slider-dots --save-dev

or

yarn add -D react-any-slider-dots

Usage :

Add base styles to root component in your project:

import React from 'react'
...
import 'react-any-slider-dots/dist/dots.css'

export const App = () => {
...
}

Then use Dots in a slider:

import React from 'react'
import { ReactAnySliderDots as Dots } from 'react-any-slider-dots'

export const MySlider: React.FC = () => {
    const [activeIndex, setActiveIndex] = useState(0)
    const [dotsCount, setDotsCount] = useState(10)
    
    return (
        <div className="SLIDER-CONTAINER" style={{ position: 'relative' }}>
            // HERE YOUR SLIDER
            // AND HERE THE SLIDER'S ARROWS MAYBE
            <Dots
                dotsCount={dotsCount}
                activeIndex={activeIndex}
            />
        </div>
    )

You can use adapter for ReactSlick slider:

import React from 'react'
import SlickSlider, { Settings } from 'react-slick'
import { ReactAnySliderDots as Dots, reactSlickAdapter } from 'react-any-slider-dots'

export const MySlider: React.FC = () => {
    const config: Settings = {
        ...
        appendDots: (dots) => <Dots {...reactSlickAdapter(dots)} />,
        ...
    };
    
    return (
        <div className="SLIDER-CONTAINER" style={{ position: 'relative' }}>
            <SlickSlider {...config}>
                ...
            </SlickSlider>
        </div>
    )