@dashdot/react-hooks-slider NPM

Dashdot React Hooks Slider

A headless, customizable slider for React using hooks.

Getting Started

To get started, add @dashdot/react-hooks-slider to your project:

Using npm:

npm install --save @dashdot/react-hooks-slider

Using yarn:

yarn add @dashdot/react-hooks-slider

Please note that @dashdot/react-hooks-slider requires react@^16.0.0 as a peer dependency.

Usage

The package exports a single hook, useSlider, which can be used to control a slider. The hook returns an object containing various state values and functions for controlling the slider. The only requirements for using the hook are a container element and an array of slide elements, which are passed as refs.

const {
    /* Basic usage */
    activeSlide,
    totalSlides,
    position, // returns the position using percentage
    isDisabled, // happens when slides are smaller than container
    hasPreviousSlide,
    hasNextSlide,

    /* Handlers */
    handleNextSlide, // go to next slide
    handlePreviousSlide, // go to previous slide
    handleSlideSelect, // navigate to specific slide

    /* Swiping (when using framer-motion) */
    isSwiping,
    swipingProps

    /* Refs */
    containerRef,
    slideRefs,
} = useSlider(
    initialSlideIndex, // defaults to 0
    autoplaySpeed, // time in ms to go to next slide. Defaults to 0 = inactive
    slidesAreRendered, // passes if the slides are rendered. This fixes layout issues with conditional rendering. Defaults to true
}

Examples

Basic usage

import { useSlider } from '@dashdot/react-hooks-slider';


const {
    position,
    containerRef,
    slideRefs,
} = useSlider();

return (
    <div ref={containerRef}
        style={{
            whiteSpace: 'nowrap',
            display: 'flex',
            flexWrap: 'nowrap',
            width: '100%',
        }}
        >
        {slides.map((slide, index) => (
            <div
                key={slide.id}
                ref={(ref) => { slideRefs.current[index] = ref }}
                style={{
                    x: position,
                    width: '25rem',
                    height: '25rem',
                }}
            >
                {slide.content}
            </div>
        ))}
    </div>
);

3rd party animation / styling

You can use any sort of animation or styling. The example below uses tailwind and framer-motion.

const {
    position,
    hasPreviousSlide,
    hasNextSlide,
    handleNextSlide,
    handlePreviousSlide,
    slideRefs,
    containerRef,
    isDisabled,
    swipingProps,
} = useCarousel()

return (
    <motion.div
        ref={containerRef}
        animate={{ x: isDisabled || position === null ? 0 : `${position}%` }}
        transition={{ duration: 0.4, ease: 'easeOut' }}
        className="whitespace-nowrap flex flex-nowrap w-full touch-pan-y"
        {...swipingProps}
    >
        {images.map((image, index) => (
            <div
                key={image.filename}
                ref={(ref) => { slideRefs.current[index] = ref }}
                className="pr-4 lg:pr-6 last:pr-0 flex-grow-0 flex-shrink-0 w-[365px] h-[288px] relative"
            >
                <div className="relative w-full h-full">
                    <Image
                        maxWidth={640}
                        src={image.filename}
                        alt={image.alt}
                        layout="fill"
                        objectFit="cover"
                        draggable={false}
                    />
                </div>
            </div>
        ))}
    </motion.div>
)