Custom tab panel ids

[valeryq]

Hello. Can I assign my custom id to panel? I need to have been panel ids: ['actions', 'news', 'something']. Can I do this?

[danez]

Not currently. The ids have to be generated at the moment, as the are cross referenced inside the tabs. But maybe we can change that so that it uses provided ids.

[krzysu]

It would be really useful to be able to assign some identifiers to tabs and then onSelect to know which one is selected. Having only index in onSelect handler is not helpful in case you have conditionally generated tabs. So based on index I don't really know which tab is currently selected as I need to run it through the same conditions I used for generating tabs. It could be optional tabName provided to onSelect handler.

[danielengel]

It would be also helpful for those who have a SSR app, and during rehydration in browser we now see warning: warning.js:33 Warning: Prop id did not match. Server: "react-tabs-8" Client: "react-tabs-0"

[danez]

This is only about replacing the selectedIndex with custom identifiers. For DOM ids you can use https://github.com/reactjs/react-tabs#resetidcounter-void to reset the id counter in the ssr app.

[danielengel]

Indeed, thanks @danez!

[ghost]

Custom Components don't work. documentation example

My code

const CustomTabPanel = ({ children }) => (
        <TabPanel>
            <h1>{children}</h1>
        </TabPanel>
    );

CustomTabPanel.tabsRole = 'TabPanel';

<Tabs>
    <TabList>
        <Tab>1</Tab>
        <Tab>2</Tab>
    </TabList>

    <CustomTabPanel>
        <h2>section 1</h2>
    </CustomTabPanel>
    <TabPanel>
        <h2>section 2</h2>
    </TabPanel>
</Tabs>

[joepvl]

Because of how react-tabs works internally (it uses cloning to opaquely control various parts of the tab state), you need to pass any incoming props to the component you're wrapping. The easiest way to do this is to use the rest and spread operators, e.g.:

const CustomTabPanel = ({ children, myCustomProp, ...otherProps }) => (
  <TabPanel {...otherProps}>
    <h1>{children}</h1>
    {myCustomProp && `myCustomProp: ${myCustomProp}`}
  </TabPanel>
)

CustomTabPanel.tabsRole = 'TabPanel'

[Tom5om]

I would love to have custom id's as well

[goldmont]

Hi there, I solved by using data attributes.

<TabList>
	<Tab data-custom-identifier={'my-custom-identifier'}>Test</Tab>
</TabList>

onSelect={(index, last, event) => {
	const tab = (event.target as HTMLElement).getAttribute('data-custom-identifier') ?? '';
        console.log(tab); // my-custom-identifier
}}

[Ronny25]

The issue mentioned by @danielengel is still valid with the latest version and React18. id just became more advanced, error message: Prop id did not match. Server: "tab:Res6:0" Client: "tab:R7e39:0"

[MarttiR]

A hydration issue is indeed still present in 6.0.0.

Warning: Prop `id` did not match. Server: ":Rakmim:0" Client: ":R2l5km:0"

Exposing a prop for setting a custom ID seems the most React-like solution.

[ajosephjohnson]

How can we fix this hydration issue in my Gatsby app? I'm seeing Warning: Prop id did not match. Server: "tab:R1al5:0" Client: "tab:R5akl:0". This was opened in 2016. Thanks!