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:

Exploring the new Chakra UI MCP Server

Discover how the Chakra UI MCP server integrates AI into your editor, reducing context switching and accelerating development by fetching real-time documentation, component data, and code insights directly in-app.

Emmanuel John
Oct 9, 2025 ⋅ 6 min read
Build AI Agent Without Langchain JS

LangChain.js is overrated; Build your AI agent with a simple fetch call

Skip the LangChain.js overhead: How to build a Retrieval-Augmented Generation (RAG) AI agent from scratch using just the native `fetch()` API.

Ikeh Akinyemi
Oct 9, 2025 ⋅ 3 min read
the replay october 8

The Replay (10/8/25): Data enrichment, CSS is back, TypeScript 5.9

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 8th issue.

Matt MacCormack
Oct 8, 2025 ⋅ 30 sec read
Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 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