Multiple carousels and refs?

[jacobgranberry]

Hey there! I'm running into a problem I'm a little stuck trying to solve. I have an object consisting of keys with arrays of images as the values. Each key I'm trying to render as a new carousel, using chakra-uis TabList component (So the carousel is being unmounted, and remounted on tab change). I can't seem to get the embla carousel to reinit on tab change, the ref stays attached to the initial slider. Any guidance here would be appreciated!

<Tabs maxW='100%'> <TabList> {Object.keys(regionDictionary).map((item, index) => ( <Tab key={index}> <Text>{nameFormatter(item)}</Text> </Tab> ))} </TabList> <TabPanels> {Object.keys(regionDictionary).map((region, index) => ( <TabPanel key={index}> <Box className='embla' position='relative' maxWidth={'100vw'} mx='auto'> <Box className='embla__viewport' ref={viewportRef} overflow='hidden' width='100%' cursor='grab'> <Flex className='embla__container' userSelect='none'> {regionDictionary[region].map((item, i) => ( <Box position='relative' overflow='hidden' minW='350px' className='embla__slide' key={i}> <Box className='embla__slide__inner' position='relative' overflow='hidden' width={350} height={350} > <Image width={350} height={350} className='embla__slide__img' src={urlFor(item.marqueeImage.asset).url()!} alt='A cool cat.' /> </Box> </Box> ))} </Flex> </Box> </Box> </TabPanel> ))} </TabPanels> </Tabs>

[jacobgranberry]

Of course, as soon as I post this I figure out the problem. I changed the Tabs component to lazy mount and unrender the component on tab change.

[davidjerleke]

Hi @jacobgranberry,

You can manually trigger a reInit when the tab key changes like so:

useEffect(() => {
  if (!embla) return
  embla.reInit()
}, [embla, tabKey])

Just make sure the useEffect only triggers when necessary. You didn’t provide a CodeSandbox so it’s hard to give you a code example, but one way to solve it would be to use a usePrevious hook for the tab key value.