Enable or disable on certain screen sizes

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?

[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]

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