Custom tab panel ids about react-tabs HOT 12 OPEN

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.

from react-tabs.

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.

from react-tabs.

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'

from react-tabs.

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"

from react-tabs.

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.

from react-tabs.

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.

from react-tabs.

Indeed, thanks @danez!

from react-tabs.

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>

from react-tabs.

I would love to have custom id's as well

from react-tabs.

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
}}

from react-tabs.

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"

from react-tabs.

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!

from react-tabs.