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:

Actix Web Adoption Guide: Overview, Examples, And Alternatives

Actix Web adoption guide: Overview, examples, and alternatives

Actix Web is definitely a compelling option to consider, whether you are starting a new project or considering a framework switch.

Eze Sunday
Mar 18, 2024 â‹… 8 min read
Getting Started With NativeWind: Tailwind For React Native

Getting started with NativeWind: Tailwind for React Native

Explore the integration of Tailwind CSS with React Native through NativeWind for responsive mobile design.

Chinwike Maduabuchi
Mar 15, 2024 â‹… 11 min read
Developing A Cross Platform Tv App With React Native

Developing a cross-platform TV app with React Native

The react-tv-space-navigation library offers a comprehensive solution for developing a cross-platform TV app with React Native.

Emmanuel Odioko
Mar 14, 2024 â‹… 10 min read
Essential Tools For Implementing React Panel Layouts

Essential tools for implementing React panel layouts

Explore some of the best tools in the React ecosystem for creating dynamic panel layouts, including react-resizable-layout and react-resizable-panels.

David Omotayo
Mar 13, 2024 â‹… 8 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