@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