Forward embla up in the hierarchy using React

First of all, congratulations on developing Embla, It’s a great library!

I’m trying to interact programmatically with Embla from a component that it’s higher in a React component hierarchy, but I cannot figure how to do it. I have a <Container> component that renders another component with the carousel (<EmblaCarousel>), but I want to use a hook in <Container> (potentially useEffect), that access the carousel and calls its scrollTo(). I cannot nest the <Container> in EmblaCarousel>. Is there a way to do this? I tried using React.forwardRef in <EmblaCarousel>, but I couldn’t figure how to use it to achieve what I have in mind.

Thanks in advance!

[davidjerleke]

No worries Ian (@ianmethyst),

Thanks for the response. I wast curious if it helped and I’m glad to hear that it did, so I’m closing this issue as resolved. I pretty much followed the example in the official documentation page for React.forwardRef.

About the off-topic request. I don’t think your app will suffer a performance hit unless you’re calling embla.reInit() repeatedly, like 100 times a second or similar. You’re welcome to create a feature request for this, although I can’t promise that I will choose to add it to the Embla Carousel core.

Kindly, David

[ametis70]

Thank you for your time, and sorry for the late response! Yes, this solved my problem, I didn’t realize I could just move the hook up and use React.forwardRef this way

The use case for the off topic question is that I have a carousel that have some items that are zoomable and draggable, and I’d like to disable the drag event in the carousel when an image is zoomed and enable it again when the zoom is reset. I thought I could use reinit, but I was wondering if this would have some kind of performance impact. Sorry if this is a silly question and using reInit is the way to go, I didn’t have the time to test it out