(React) Is it possible to send an Embla ref into a React Portal?

[andyford]

I'd like to have an on-page carousel that launches a larger version of the carousel inside a lightbox when a slide is clicked.

For this, I have one main carousel and a lightbox carousel. I create both the refs and can display both of the carousels on the page simultaneously. And they both control each other (very similar to the thumbnail example https://www.embla-carousel.com/examples/predefined/#thumbnails)

I run into problems when I try to put the lightbox version inside of a react Portal:
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I thought this was perhaps a limitation of React refs and portals but I confirmed that regular react refs can be sent into portals.

So has anyone managed to create an embla ref then send it into a portal?

[davidjerleke]

Hi @andyford,

This won't answer your question, but is there a state where the on-page carousel and the lightbox carousel are visible at the same time?

Best,
David

[andyford]

Hey thanks for the quick reply! Yes, the lightbox has a semi-transparent backdrop and you can see the original on-page carousel underneath (for better or worse)

Assuming that passing the Embla ref through a Portal is somehow not doable, my theoretical workaround is to have the lightbox version in a separate component that receives a currentIndex and onSlideChange prop which I can use to keep them in sync (I think this will work okay). I just wanted to see if I was missing something or had overlooked an obvious way around this.

[davidjerleke]

@andyford Thanks for the additional details. I see. I haven't tested passing the emblaRef to a React Portal actually. So I don't know if there are things that could be changed in the embla-carousel-react hook useEmblaCarousel() or if something in your code is causing this. Feel free to investigate it if you like.

Best,
David

[davidjerleke]

@andyford I’m closing this discussion then? No objections?

[andyford]

yeah that's fine. I messed around a bit more and still couldn't manage to pass the embla ref through a portal, but sending the selected index and an onSlideChange prop to the portaled embla component worked fine.

[davidjerleke]

Thanks @andyford. Cheers.