Chakra UI에는 useTabsContext가 있습니다.

차크라 UI의 Tabs에는 아직 문서가 없습니다.useTabsContext를 사용하여 내부 데이터에 액세스할 수 있습니다.

https://github.com/chakra-ui/chakra-ui/blob/117f2db20fbc7c261cdf9daa528a708eb191f6d6/packages/tabs/src/use-tabs.ts#L178

내부 API 사용에 적합한지는 다소 우려되지만 이 PR보면 외부 사용을 구상하는 듯하다.

사용법

예를 들면 아래의 예를 고려해 보아라

const TabsSample = () => {
  return <Tabs>
    <TabList>
      <Tab>1</Tab>
      <Tab>2</Tab>
      <Tab>3</Tab>
    </TabList>
    <TabPanels>
      <TabPanel>1 panel</TabPanel>
      <TabPanel>2 panel</TabPanel>
      <TabPanel>3 panel</TabPanel>
    </TabPanels>
  </Tabs>
}

Context를 사용해야 하기 때문에 우선<Tabs> 그 하위 요소를 분리한다.

const TabsInner = () => {
  return <>
    <TabList>
      <Tab>1</Tab>
      <Tab>2</Tab>
      <Tab>3</Tab>
    </TabList>
    <TabPanels>
      <TabPanel>1 panel</TabPanel>
      <TabPanel>2 panel</TabPanel>
      <TabPanel>3 panel</TabPanel>
    </TabPanels>
  </>
}

const TabsOuter = () => {
  // Tabs ≒ TabsProvider
  return <Tabs>
    <TabsInner />
  </Tabs>
}

<Tabs> 자체는 나타나지 않아 거의 <TabsProvider>라고 볼 수 있다.[1]
그리고 <TabsInner>측에서 훅스를 사용할 수 있습니다.

const TabsInner = () => {
  const { selectedIndex, focusedIndex } = useTabsContext()
  return <Box>
    <Box>{selectedIndex}</Box>
    <Box>{focusedIndex}</Box>
    <TabList>
      <Tab>1</Tab>
      <Tab>2</Tab>
      <Tab>3</Tab>
    </TabList>
    <TabPanels>
      <TabPanel>1 panel</TabPanel>
      <TabPanel>2 panel</TabPanel>
      <TabPanel>3 panel</TabPanel>
    </TabPanels>
  </Box>
}

undocumented이고 사용할 기회도 많지 않지만 가끔 렌더링의 제어와 관련되어 필요하기 때문에 알아도 손실이 없다
각주
소스 코드는 다음과 같습니다. https://github.com/chakra-ui/chakra-ui/blob/117f2db20fbc7c261cdf9daa528a708eb191f6d6/packages/tabs/src/tabs.tsx#L46-L52↩︎