Using Plugins with `useEmblaCarousel` hook

[TheMikeyRoss]

Bug is related to

• [x] embla-carousel-react
• [x] embla-carousel-class-names

Embla Carousel version

"embla-carousel-class-names": "^8.0.0-rc14",
"embla-carousel-react": "^8.0.0-rc14",

Describe the bug

It seems that using plugins doesn't when when using the useEmblaCarousel hook

Steps to reproduce

1. Install embla-carousel-react and embla-carousel-class-names
2. Import useEmblaCarousel hook and ClassNames

   import useEmblaCarousel from "embla-carousel-react";
   import ClassNames from "embla-carousel-class-names";

3. Use the useEmblaCarousel hook and try to add the plugins argument

   const [emblaRef, emblaApi] = useEmblaCarousel({
   loop: false,
   plugins: [ClassNames({ draggable: "" })],
   });

4. You'll notice that the classname is not working.

if you're using Typescript you'll see this warning:

Expected behavior

The classname should be applied, in my case the draggable should be disabled since I passed an empty string to it.

[TheMikeyRoss]

After some additional research I noticed from here I should just pass the plugins as a prop .

So I did it like this

  const classNamesOptions = { dragging: "", draggable: "" };

  const [emblaRef, emblaApi] = useEmblaCarousel(
    { loop: false, dragFree: true },
    [ClassNames(classNamesOptions)]
  );

and it seems that the dragging is still enabled. My goal here is to disable dragging altogether

[TheMikeyRoss]

Here's a codesandbox with a reproducible issue https://codesandbox.io/s/embla-carousel-github-issue-622-forked-ww6s5j?file=/src/js/EmblaCarousel.js

[davidjerleke]

Hi @TheMikeyRoss,

Thanks for your bug report. This is not a bug. I’m not sure where you got the initial way of adding plugins from because there’s no example anywhere suggesting that.

Here’s the official way of adding plugins in the docs. Just switch to the React tab if you’re using React.

And it seems that the dragging is still enabled. My goal here is to disable dragging altogether

I would suggest you to search the docs first when you want to achieve something:

Following that search suggestion, disabling dragging entirely is done by setting the watchDrag option to false like so watchDrag: false.

Best, David

[TheMikeyRoss]

Thanks @davidjerleke