2023-02-01
2643
#react
Florian Rappl
4273
Feb 1, 2023 â‹… 9 min read

Building a carousel component in React using Hooks

Florian Rappl Technology enthusiast and solution architect in the IoT space.

Recent posts:

how to use the Next.js Image component to optimize images

How to use the Next.js Image component to optimize images

Explore automatic image optimization using Next Image, the built-in image optimization solution for Next.js.

Adebiyi Adedotun
Apr 23, 2025 â‹… 7 min read

The right way to implement AI into your frontend development workflow

Discover how to integrate frontend AI tools for faster, more efficient development without sacrificing quality.

Wisdom Ekpotu
Apr 23, 2025 â‹… 5 min read
React Hook Form Vs. React 19: Should You Still Use RHF In 2025?

React Hook Form vs. React 19: Should you still use RHF in 2025?

Is React Hook Form still worth using? In this guide, you will learn the differences, advantages, and best use cases of React Hook Form.

Vijit Ail
Apr 23, 2025 â‹… 20 min read
deploying react apps to github pages

How to deploy React apps to GitHub Pages

Walk through the process of deploying a Create React App project to GitHub Pages, customizing your domain, and automating deployments with GitHub Actions.

Nelson Michael
Apr 22, 2025 â‹… 10 min read
View all posts

14 Replies to "Building a carousel component in React using Hooks"

  1. Nice one, I’ll definitely try it later. I’d just want to point out that while developing custom hooks, I think it’s better to return an object instead of an array, so instead of:

    const [active, setActive, handlers, style] = useCarousel(length, interval);

    You can have:

    const { active, setActive, handlers, style } = useCarousel(length, interval);

    The order will be irrelevant, and for newcomers, it’d be useful to know what the hook offers without having to take a look at the code itself.

  2. This is the first “tutorial” I have seen that is actually a tutorial and not some lazy person using someone else’s work, so thank you for that.

  3. This is so hard to pass without a full working example.

    Your hook is in Typescript (great) but the example component is javascript and fails type checking if put in a tsx component, having spent 30 mins fixing that up it’s now doing *something* with animating “slides” but without the css classes you’ve implemented it’s incomplete.

    Looks like you’ve got a great bit of code which I’d love to give kudos on, but without a working codepen or something it’s just pure frustration.

  4. Thanks for the article! Really enjoyed it–I do have a question: how would you approach handling the need to display a set number of slides initially, like 2 or 3 children, instead of all slides being full-width? Any ideas?

  5. There are three options that I see (I will assume N = fixed):

    1. Lazy approach: Just have 1 direct child element, but include N elements (photos, content boxes, whatever) in there. Pro: Easy to implement. Con: Always scrolls / forwards by N.
    2. Hacky: Use the code above, but adjust it to divide by N in all things regarding display.
    3. Explicit: Have an argument like “slidesPresented” which is usually set to 1. Setting it to N would generalize like in 2.

    Maybe I’ll find the time to adjust the sample code of https://github.com/FlorianRappl/react-carousel-hook-example with (3).

    There may be other options, too. But these three come to my mind directly.

  6. Thank you for the response, I’ve created an issue on the github repo with the desired functionality… I’m not sure that these approaches would work in this scenario. Thanks again

  7. Hello, what is the reason for using `left` for animating, instead of `transform: translate()` ? I thought css transforms are prefered over `top, left` for animating. Otherwise, thanks for the great tutorial! I have implemented it for my website

  8. The author’s reason as to the lack of understanding of “this” is the reason of creating react hooks followed by an article that gives no concrete context based on its “Building a carousel component in React using Hooks” has left me a bit baffled.

  9. The amount to shift (value for translateX) always seems to be the same. Hence jumping directly to non-consecutive slide is not giving proper animation

Leave a Reply