Closed manlaingelo closed 2 years ago
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:
Best, David
Thank you for your quick response. I really appreciate it. 🙇♂️✨✨
Sterling work, thanks David
Hi @manlaingelo and @PerryRylance,
If you're interested: v7.0.0-rc01 has been released. Feel free to try it out.
Cheers, David
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?
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:
...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
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
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:
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
Released with v7.
Bug is related to
Embla Carousel version
Describe the bug
Unable to install embla-carousel-react in react v18 project
Steps to reproduce
npm install embla-carousel-react --save
Expected behavior
Successfully resolve react up to v18.
Additional context