React 18 Support

[manlaingelo]

Bug is related to

• [x] embla-carousel-react

Embla Carousel version

• v6.2.0 (Latest, 22/04/22)

Describe the bug

Unable to install embla-carousel-react in react v18 project

Steps to reproduce

1. Open react v18 project
2. Install package with npm install embla-carousel-react --save

Expected behavior

Successfully resolve react up to v18.

Additional context

[davidjerleke]

Hi @manlaingelo,

Thank you for creating this issue. React 18 support will be released with version 7. You can track the progress of version 7 here:

• 298

Best, David

[manlaingelo]

Thank you for your quick response. I really appreciate it. 🙇‍♂️✨✨

[PerryRylance]

Sterling work, thanks David

[davidjerleke]

Hi @manlaingelo and @PerryRylance,

If you're interested: v7.0.0-rc01 has been released. Feel free to try it out.

Cheers, David

[OwenMelbz]

We've been testing out 7 rc5 currently after jumping from 6.2... i believe.

However we've noticed this strange undesired behaviour, wondering if there's something in the changes that would explain it?

Effectively we only have 1 slide per screen, however the offset from the left exponentially gets larger and larger with each slide, this worked perfectly in v6.

the code is just:

const [emblaRef, emblaApi] = useEmblaCarousel({
        draggable: false,
    })

Is there anything in the change list could be causing this?

[davidjerleke]

Hi @OwenMelbz,

Thank you for testing the release candidate. My initial guess is that it could be caused by the move away from the relative % unit:

• 60

...and that you need to reInit() the carousel as soon as you toggle open the modal like so:

useEffect(() => {
  if (emblaApi && modalOpen) emblaApi.reInit()
}, [modalOpen, emblaApi])

...But it’s impossible for me to guess what your setup looks like. Would you mind sharing a CodeSandbox with some instructions on how to reproduce the problem?

Best, David

[OwenMelbz]

Thanks for the snappy response!

I've added a reInit() call after the animations are complete and this does seem to solve the issues :)

Just curious if there is an option to opt back into usage of % to preserve any backwards compatibility?

Many thanks

[davidjerleke]

Hi @OwenMelbz,

Ok so seems like my guess was correct then. No unfortunately not. It’s a breaking change in other words. In most cases it will work as before but carousels inside elements that are toggled visible (like modals) have to be tested. If you look at the bugs section in the v7 issue:

• 298

You will see that the relative unit caused bugs in some cases. That’s why the move to px was made. Keeping percentage as an option would increase bundle size and people think a small bundle size is very important. Every time I make changes I have to take that into account.

Best, David

[davidjerleke]

Released with v7.