use-carousel-hook

useCarousel

useCarousel is a React hook for adding functions to create a sliding carousel.

No styling is included, the hook returns functions to integrate into your slider to allow for full flexibility and control over the carousel you create.

Typescript definitions are included.

How to use

Call the useCarousel hook in your code. This will return the following values as an object.

Property	Type	Description
ref	React.MutableRefObject<HTMLDivElement>	Attach this ref to your carousel element that contains your cards/elements.
previous	() => void;	Go to the previous element in the carousel.
next	() => void;	Go to the next element in the carousel.
setCurrent	(current: number) => void;	Go to a specific element index in the carousel.
reset	() => void;	Go to the beginning of the carousel.
position	{ isAtStart: boolean; isAtEnd: boolean }	Position of the carousel. Can be used to disable next/previous buttons if needed.

Code example

import React from 'react';
import { useCarousel } from 'use-carousel-hook';
import { Inner, Item } from './carousel.styled';

const Carousel: React.FC = () => {
    const { ref, previous, next, setCurrent, reset } = useCarousel();

    return (
        <div>
            <button onClick={previous}>Previous</button>
            <button onClick={next}>Next</button>
            <button onClick={reset}>Reset</button>
            <button onClick={() => setCurrent(2)}>Set index to 2</button>
            <Inner ref={ref}>
                <Item>Item 1</Item>
                <Item>Item 2</Item>
                <Item>Item 3</Item>
                <Item>Item 4</Item>
            </Inner>
        </div>
    );
};

export default Carousel;

Options

Option	Type	Default value
scrollBehavior	'smooth' | 'auto'	'smooth'
direction	'horizontal' | 'vertical'	'horizontal'

Options example

const { ref, previous, next } = useCarousel({ scrollBehavior: 'auto', direction: 'vertical' });

Changelog

[0.0.2]

• Added option to go to previous/next slide a specific amount
• Updates to package.json
  • Added keywords
  • Added bugs URL
• Fixed issue with going to last item from the start where multiple items are in view
• Implement @use-effect/did-update to stop unneeded renders on mount