Enable or disable on certain screen sizes

[flayks]

I'm trying to use Embla (which is fantastic btw, great job) only on mobile, so sort of disabling it on desktop when it's been enabled on mobile (i.e. window resize or orientation change).

So for instance:

1. Load: Desktop screen size (>768) => No carousel
2. Resize: to Mobile (<768) => Init carousel
3. Resize: to Desktop (>768) => Destroy carousel
4. etc…

Flickity has this cool feature where it tracks if a CSS after element has a certain content, then enables or disables it with CSS breakpoints. But it's also 51kb of JS, so Embla is def more optimized and lightweight!

Is there any way to have a similar kind of behavior with Embla without having to listen to a window resize event and embla.destroy() (which doesn't seem to completely destroy my instances btw) + embla.reInit(options) everytime? Or am I missing something?

[flayks]

Just for the context, this is kind of what I'm trying to achieve, with code based on this answer, but it doesn't really seem to work when resizing to a >768 screen size from mobile (it should destroy but the carousel is still "active" and has inline styles applied)

import React, { useRef, useEffect, useState } from 'react'
import EmblaCarousel from 'embla-carousel'
import { debounce } from '../utils/functions'

const Carousel = ({ children, settingsProps = '' }) => {
    const carousel = useRef(null)
    let embla = null

    // Settings
    const settings = {
        loop: true,
        ...settingsProps
    }

    // Check for Embla
    const checkEmbla = () => {
        if (window.innerWidth < 768) {
            if (embla === null) {
                embla = EmblaCarousel(carousel.current, settings)
            }
        } else {
            if (embla != null) {
                console.log('destroy')
                embla.destroy()
                embla = null
            }
        }
    }

    useEffect(() => {
        checkEmbla(embla)

        window.addEventListener('resize', () => debounce(checkEmbla(), 100))
    }, [embla])

    return (
        <div className="carousel" ref={carousel}>
            <div className="carousel__items">
                {children}
            </div>
        </div>
    )
}

export default Carousel

[davidjerleke]

Hello Félix (@flayks),

Thank you for your question. I think the code in this old issue you mention is probably outdated. A lot has changed with the React implementation of Embla Carousel since then.

I took some time to create a CodeSandbox that implements what you want to achieve. Here's the CodeSandbox with its related code if you want to check it out:

const EmblaCarousel = ({ children }) => {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false });
  const [emblaIsActive, setEmblaIsActive] = useState(false);

  const initEmblaBelow768px = useCallback(() => {
    const isActive = window.innerWidth < 768;
    setEmblaIsActive(isActive);
  }, [setEmblaIsActive]);

  useEffect(() => {
    initEmblaBelow768px();
    window.addEventListener("resize", initEmblaBelow768px);
    return () => window.removeEventListener("resize", initEmblaBelow768px);
  }, [initEmblaBelow768px]);

  return (
    <div className="embla">
      <div className="embla__viewport" ref={emblaIsActive ? emblaRef : null}>
        <div className="embla__container">
          {/* ...slides */ }
        </div>
      </div>
    </div>
  );
};

So here's what's happening:

• Embla reacts to when its containerRef (called emblaRef in the code) changes and won't initialize when it's null, and if there's an activated instance of Embla it will destroy it automatically.
• So basically we just skip using the emblaRef by passing null when the screen width is >= 768.

Note

• If this is a part of a bigger project, I would probably create a reusable hook that exposes the window size so other components can make use of it, instead of having it locally in the EmblaCarousel component.
• I would also debounce the resize event with a reusable debounce hook.
• If you're server side rendering your app you should perform a check if the window object is available before you proceed with the window size check.
• Here's the recommended bare minimum setup for using Embla Carousel with React, if you want to check out the documentation example.

Let me know if it helps! David

[flayks]

Thank you so much @davidcetinkaya for your time and answer! That sounds very good. I'll have a look tomorrow and let you know.

[flayks]

@davidcetinkaya I tried your example and it works… partially, haha. Even on your CodeSandbox, it seems that coming from a small screen (<768, where the carousel is enabled), to the Desktop, the carousel is not really destroyed and we can still drag slides. The behavior should be that when starting on mobile, it should dynamically destroy and reinit the carousel.

[davidjerleke]

@flayks that’s strange. I can’t drag it and the scenario you mention works for me. Which link did you click on?

Try this link: https://isr3u.csb.app/

[flayks]

This exact one! Here is a video to show more context: https://streamable.com/8zzx85

[davidjerleke]

So strange. Thanks for the video @flayks. I’ll take a look at it and will let you know when I have something.

[davidjerleke]

Hello again Félix (@flayks),

So I found why this is happening. Embla will re-initialize on the resize event internally, and this resize event is debounced with 500 milliseconds. This is my understanding of the issue:

• When you resize the window, it triggers Embla's internal debounced resize event.
• When the ref gets null Embla destroys itself.
• After 500 milliseconds, the debounced resize callback that was triggered fires and re-initializes Embla.

To solve this I will ship a patch fix as soon as possible. I'll have to make sure the internal re-initialize function doesn't run when the carousel has been destroyed. Nice catch 🙂!

Kindly, David

[flayks]

@davidcetinkaya Oh wow, good work on finding that David! I kind of saw when trying the resizing method that it was debounced, but I didn't know that it would affect the destroy method as well. Thanks for your digging. Other than that, the library is on point 👌

[flayks]

@davidcetinkaya hella fast! Thanks for fixing that issue, it's gonna help lots on my current project 💥

[davidjerleke]

Hello Félix (@flayks),

Release 4.0.2 comes with a fix for this issue. Please let me know if it's working as intended.

Best, David

[davidjerleke]

@flayks so this solves the issue right 🙂?

[flayks]

@davidcetinkaya absolutely! Works like a charm now. Thanks again!

[davidjerleke]

I’m glad to hear that @flayks. Thank you for opening this issue and making Embla Carousel better 👍🏻.

Best, David