DEV Community

Anoop Francis V H
Anoop Francis V H

Posted on

How I Created a Custom Carousel In React using useRef and useState in Typescript

#react #css #javascript

Hello world...
This is my first post hoping I can write more. quick intro about me, I have been a developer for 2 years and one year as a Front-End developer, working on react.
I try to create fun react component from scratch rather than relying on a package or some library like material UI or Ant Design. By this post I aim to explain How I created a custom carousel using react hooks some css and typescript.

How It Works:

Before we start I want to show you how it looks in code and how it looks in action

            <Carousel
            heading="demo"
            n={2}
            g="12px"
            >
             {[...Array(10)].map((_val,index) => {
                    return(
                        <FlexBoxTitleCard
                        title={`item ${index+1}`}
                        key={`item ${index+1}`}
                        />
                    )
                })}
            </Carousel>
Enter fullscreen mode Exit fullscreen mode

This is How It is in action:
Carousel Demo

CODE:

this is the code for my carousel component we will break it down step by step:
this is how the carousel.tsx looks like

import { useRef, useState } from 'react'

interface CarouselProps {
    heading:string,
    children:JSX.Element[]
    n?:number,
    g?:string,
}

export const Carousel = (props:CarouselProps) => {

    const [active,setActive] = useState(0)

    const carouselRef = useRef<HTMLDivElement>(null)


    const scrollToNextElement= () => {
        if(carouselRef.current){
            if(active < carouselRef.current.childNodes.length - (props.n?props.n:3)){
                carouselRef.current.scrollLeft = (carouselRef.current.childNodes[active + 1] as HTMLElement).offsetLeft - (carouselRef.current.parentNode as HTMLElement).offsetLeft;
                setActive(active +1)
            }
        }
    }

    const scrollToPreviousElement = () => {
        console.log(active);
        if(carouselRef.current){
            if(active > 0) {
                carouselRef.current.scrollLeft = (carouselRef.current.childNodes[active - 1] as HTMLElement).offsetLeft - (carouselRef.current.parentNode as HTMLElement).offsetLeft ;
                setActive(active - 1)
            }
        }
    }

    return(
        <div>
            <div>
                <p>{props.heading}</p>
                <div>
                    <span className="nav-button cursor_pointer" onClick={scrollToPreviousElement} style={{marginRight:"32px"}}>{"<"}</span>
                    <span className="nav-button cursor_pointer" onClick={scrollToNextElement}>{">"}</span>
                </div>
            </div>
            <div
            className="carousel-slides"
            ref={carouselRef}
            style={{
                gridAutoColumns:`calc((100% - (${props.n?props.n:3} - 1)*${props.g?props.g:"32px"})/${props.n?props.n:3})`,
                gridGap:props.g
            }}
            >
                {props.children}
            </div>
        </div>

    )
}
Enter fullscreen mode Exit fullscreen mode

carousel.css

.carousel-slides {
  display: grid;
  grid-auto-flow: column;
  /* grid-auto-columns: calc((100% - (var(--n) - 1) * var(--g)) / var(--n));
    grid-gap: var(--g); */
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 40px 0;
}

.carousel-slides::-webkit-scrollbar {
  display: none;
}

.nav-button {
  padding: 8px;
  border: 1px solid black;
  border-radius: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Carousel will have 4 props:

interface CarouselProps {
    heading:string,
    children:JSX.Element[]
    n?:number,
    g?:string,
}
Enter fullscreen mode Exit fullscreen mode

let's break it down,

  1. heading:(required) - Heading For the Carousel
  2. children:(required) - Elements inside a carousel, It doesn't matter if it's JSX.Element or JSX.Element[]
  3. n_:(optional) - number of elements to be shown , default 3
  4. g:(optional) - gap between each carousel element , default 32px 
    const [active,setActive] = useState(0)

    const carouselRef = useRef<HTMLDivElement>(null)
Enter fullscreen mode Exit fullscreen mode

I have a state active which denotes the left most element in the JSX.Element array
And I have a reference to the carousel element wrapper carouselRef

    const scrollToNextElement= () => {
        if(carouselRef.current){
            if(active < carouselRef.current.childNodes.length - (props.n?props.n:3)){
                carouselRef.current.scrollLeft = (carouselRef.current.childNodes[active + 1] as HTMLElement).offsetLeft - (carouselRef.current.parentNode as HTMLElement).offsetLeft;
                setActive(active +1)
            }
        }
    }
Enter fullscreen mode Exit fullscreen mode

scrollToNextElement function lets you scroll to next element in the carousel. Using carouselRef I am able to access the child nodes and I just change scroll left of the wrapper element to the next elements offset left, it's important substract the parent offsetleft to avoid scrolling the extra padding outside the parent element
the wrapper element itself is a grid component, the inline styling of the element is done so that it can take in prop n to get how many elements to show inside the carousel

gridAutoColumns:`calc((100% - (${props.n?props.n:3} - 1)*${props.g?props.g:"32px"})/${props.n?props.n:3})`
Enter fullscreen mode Exit fullscreen mode

this line of could sets the grid in one single row with as many as n number of items available to see, since the overflow is hidden we cannot see the rest of the elements.
scrollToPreviousElement uses the same logic

What Can I do Next:
add another prop
step:(optional) - prop which accepts number and will be the numbers of elements it will skip when we click next or previous

Scrape both scrollToNextElement and scrollToPreviousElement and change to scrollToElement which accepts a number and skips to that element

Top comments (1)

Collapse
 
anoopfranc profile image
Anoop Francis V H •

@lukeshiru Thanks for the suggestion,
Thanks for the feedback on nullish coalescing and yes I am trying to improve my naming conventions
The reason Why I used carouselRef is so that if the elements are of different type I can change my prop from JSX.Element[ ] to JSX.Element but still do the functionality.

Once again I really appreciate the feedback and suggestion

Read next

rajeshroyal profile image

Introducing Catepedia: A Nuxt 3 Cat Breed Search App

Rajesh Royal -

bcostaaa01 profile image

Vue Composables: what are they, and how to create & use one

Bruno -

dshaw0004 profile image

Charge Up JavaScript with Battery Api

Dipankar Shaw -

nevodavid profile image

React Crazy: This AI library transformed my app to the next level

Nevo David -