[Feat]: What do you think about utils hooks in React version ?

[MarlonPassos-git]

Suggestion

In my day to day work on several different projects I end up using some utility hooks to help me solve some common slider problems with Embla. One of them is useEmblaArrows which already does the entire Embla configuration process using arrows.

import type { EmblaCarouselType } from 'embla-carousel-react'
import { useCallback, useEffect, useState } from 'react'

export function useEmblaArrows(emblaApi: EmblaCarouselType | undefined) {
  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
  const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
  const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi])
  const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi])
  const onSelect = useCallback((_emblaApi: EmblaCarouselType) => {
    setPrevBtnDisabled(!_emblaApi.canScrollPrev())
    setNextBtnDisabled(!_emblaApi.canScrollNext())
  }, [])

  useEffect(() => {
    if (!emblaApi) return

    onSelect(emblaApi)
    emblaApi.on('reInit', onSelect)
    emblaApi.on('select', onSelect)
  }, [emblaApi, onSelect])

  return {
    scrollNext,
    scrollPrev,
    prevBtnDisabled,
    nextBtnDisabled,
  }
}

There's also useEmblaDots which helps me use dots.

import type { EmblaCarouselType } from 'embla-carousel-react'
import { useCallback, useEffect, useState } from 'react'

export function useEmblaDots(emblaApi: EmblaCarouselType | undefined) {
  const [selectedIndex, setSelectedIndex] = useState(0)
  const [scrollSnaps, setScrollSnaps] = useState<number[]>([])

  const scrollTo = useCallback(
    (index: number) => emblaApi?.scrollTo(index),
    [emblaApi]
  )

  const onInit = useCallback((_emblaApi: EmblaCarouselType) => {
    setScrollSnaps(_emblaApi.scrollSnapList())
  }, [])

  const onSelect = useCallback((_emblaApi: EmblaCarouselType) => {
    setSelectedIndex(_emblaApi.selectedScrollSnap())
  }, [])

  useEffect(() => {
    if (!emblaApi) return

    onInit(emblaApi)
    onSelect(emblaApi)
    emblaApi.on('reInit', onInit)
    emblaApi.on('reInit', onSelect)
    emblaApi.on('select', onSelect)
  }, [emblaApi, onInit, onSelect])

  return {
    scrollTo,
    scrollSnaps,
    selectedIndex,
  }
}

These hooks receive the Embla API as a parameter and return only the necessary states and functions for plug and play.

The point is, these hooks help me a lot on a daily basis, and I end up having to copy and paste the same thing in several different projects. And I think this could be something useful for other React developers.

Describe the solution you would like

If this were valid for the philosophy of the library, I would love to see these hooks implemented in the Embla-react lib.

Additional context

If you think it's valid, I might be doing a PR to start something about it.

[davidjerleke]

Hi @MarlonPassos-git,

Thank you for your suggestion!

If this were valid for the philosophy of the library

The main vision of Embla is the following:

It should solve the hardest technical challenges with building great carousels and do it good. The rest of the implementation should be up to the user, by utilizing its extensible API.

In my day to day work on several different projects I end up using some utility hooks to help me solve some common slider problems with Embla

I think your question shines a light on a challenge I've been trying to solve for some time. How do we keep the Embla core tight and clean while tackling the problem of repetitive work from project to project? The two things that I've created to tackle the repetitive work problems are:

• The Embla plugin system.
• The Embla carousel generator (currently in beta).

---

These are the two approaches that I can think of with pros and cons:

Creating plugins for prev/next buttons and dots

• Pros: The plugins will work for any Embla user whether they're using the embla-carousel, embla-carousel-react, embla-carousel-vue orembla-carousel-svelte package.
• Cons: The implementation won't be done the React way.

Adding utility hooks to the React package

• Pros: The implementation will be done the React way.
• Cons: The utilities will only work for React users.

What are your thoughts about this?

Best,
David

[davidjerleke]

@MarlonPassos-git I will close this discussion unless you’re interested in commenting on my thoughts?

[MarlonPassos-git]

Hi, @davidjerleke thanks for reminding me of the post 😅

To be honest, the idea of creating a plugin for all implementations is really the most interesting one. Of course the approach would be different. In the idea of the React hook, I would have functions that perform actions in the Embla API to move the sliders, and would pass them as callbacks in the click events of some DOM element. But how would you think about doing this in an agnostic way?

One option would be to directly modify the DOM and add the events using vanilla JavaScript APIs. At this point, a question arises: how would the developer define which DOM elements are arrows or dots, for example?

A viable solution would be to use custom attributes such as "data-embla-slide-arrow". This would allow the developer to clearly mark elements relevant to Embla, making the plugin easier to use.

I'll take a deeper look at your plugin tool and try to create a proof of concept (PoC). I believe this will help us better understand how everything can work together.

Thanks again for your suggestion and I look forward to collaborating more on this project!