Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support hiding of all TabPanels #525

Open
rakeshpai opened this issue Jul 22, 2023 · 1 comment
Open

Support hiding of all TabPanels #525

rakeshpai opened this issue Jul 22, 2023 · 1 comment

Comments

@rakeshpai
Copy link

Firstly, thanks for this great lib. The focus on a11y is a huge +1.

The UI I'm aiming for is a tab-strip with all the tab panels closed, and a tab is activated only when the user selects a tab. It looks like react-tabs doesn't currently support hiding all the tab panels.

I searched the issues here to find #287, but this seems to be using a CSS-only solution. This will still cause the DOM to have the tab panel. This not only adds unnecessary stuff to the DOM (my tab panel could have a lot of DOM nodes), but also fires off the rendering lifecycle of the tab panel's contents, including all the hooks for that panel. In my case, this would trigger network requests and such, which I would like to avoid.

Would it be possible to build support for something like defaultIndex={null}, so that all tab panels can be hidden away until needed?

@starccstarcc
Copy link

I don't think the react-tabs has to implement this on it's library side.
Because we can solve this.
Here's my solution.

<Tabs>
    { tabStatus
      ? <TabList>
          <Tab>Title 1</Tab>
          <Tab>Title 2</Tab>
        </TabList>
        <TabPanel>
          <h2>Any content 1</h2>
        </TabPanel>
        <TabPanel>
          <h2>Any content 2</h2>
        </TabPanel>
    : <div></div>
  }
</Tabs>

What do you think about it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants