Skip to content

Instantly share code, notes, and snippets.

@gavinsharp
Created June 24, 2020 18:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gavinsharp/f25e3938e8ef99092d4cc98184f766e8 to your computer and use it in GitHub Desktop.
Save gavinsharp/f25e3938e8ef99092d4cc98184f766e8 to your computer and use it in GitHub Desktop.
Tabs?
// Assuming:
// <Tabs>
// <Tab title="">...</Tab>
// <Tab title="">...</Tab>
// <Tab title="">...</Tab>
// </Tabs>
function Tabs({ children }) {
const tabs = React.Children.toArray(children);
const [selectedTabTitle, setSelectedTabTitle] = useState(tabs[0].props.title);
const selectedTab = tabs.find(tab => tab.props.title === selectedTabTitle);
return (
<TabsContainer>
<TabBar>
{tabs.map(tab => <ClickableTab onClick={() => setSelectedTabTitle(tab.props.title)} ... />)}
</TabBar>
<CurrentTab>
{selectedTab}
</CurrentTab>
</TabsContainer>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment