@blackblock/slider-dot
A React package that helps you create a slider dot based on any existing slider component you have.
This package provides both React hooks and render-prop components.
Code example
React hook
import {
useSliderPosition //React hook
} from '@blackblock/slider-dot'
//...
//In your React component
const [currentSlide, scrollFn] = useSliderPosition({
slideNumber: 4, //Only this value is required. The number of slide in your slider
initialValue: 1,
debounceValue: 100
})
return (
<>
<ul onScroll={scrollFn}> //Set the scrollFn in your slider to capture slide position
<li>Slide 1</li>
<li>Slide 2</li>
</ul>
<span>{currentSlide}</span> //Or consume it however you like
</>
)
//...
Render prop component
import {
SliderPosition //Render prop component
} from '@blackblock/slider-dot'
const exampleSlider = () => (
<SliderPosition options={{
slideNumber: 4, //Only this value is required. The number of slide in your slider
initialValue: 1,
debounceValue: 100
}}>
{([currentSlide, scrollFn]) => (
<>
<ul onScroll={scrollFn}> //Set the scrollFn in your slider to capture slide position
<li>Slide 1</li>
<li>Slide 2</li>
</ul>
<span>{currentSlide}</span> //Or consume it however you like
</>
)}
</SliderPosition>
)
Installation
NPM
npm i @blackblock/slider-dot
Yarn
yarn add @blackblock/slider-dot