How to turn on/off the embla carousel by breakpoint in React?

Question

Using the Embla Carousel, React version, I'm trying to turn/on off the carousel based on breakpoint. So for mobile, it's on and for tablet up it's off. Here's what I tried that seems to work initially, but won't reinitialize. I'm guessing it's because destory was called so it can reInit and tried init, but no luck there either.

const emblaOptions = {};
  const [viewportRef, emblaApi] = useEmblaCarousel(emblaOptions);

  const handleEmblaInit = () => {
    if (window.innerWidth > 768) {
      emblaApi.destroy();
    } else {
      emblaApi.reInit(emblaOptions);
    }
  };

  useEffect(() => {
    if (emblaApi) {
      handleEmblaInit();
      window.addEventListener("resize", handleEmblaInit);
    }
  }, [emblaApi]);

Answer 1

Pass null instead of the emblaRef when you want it to be inactive, like demonstrated here:

https://github.com/davidcetinkaya/embla-carousel/issues/99#issuecomment-688730519

Answer 2

From version 7 and up you can use the active option together with the breakpoints option to achieve this. Example from the Embla Carousel docs:

const options = {
  active: true,
  breakpoints: {
    '(min-width: 768px)': { active: false },
  },
}

Usage with React:

const [emblaRef, emblaApi] = useEmblaCarousel({
  active: true,
  breakpoints: {
    '(min-width: 768px)': { active: false },
  },
});