Context Based Tabs

Tabs.jsx

import React, { Children, cloneElement, useState, createContext, useContext } from 'react';

const ctx = createContext();

export function Tabs ({ children }) {
  const [selectedIndex, selectIndex] = useState(0);

  return (
    <ctx.Provider value={{ selectedIndex, selectIndex }}>
      {children}
    </ctx.Provider>
  );
}

export function TabList ({ children }) {
  const { selectedIndex, selectIndex } = useContext(ctx);

  return Children.map(children, (child, index) => (
    cloneElement(child, {
      index: index,
      isSelected: selectedIndex === index,
      onSelect: () => selectIndex(index)
    })
  ));
}

export function TabPanels (props) {
  const { selectedIndex } = useContext(ctx);
  const children = Children.toArray(props.children);
  return children.find((child, index) => {
    return index === selectedIndex;
  });
}

export function Tab ({ index, as: Comp = 'div', isSelected, onSelect, ...props }) {
  return <Comp {...props} onClick={onSelect} />
}

export function TabPanel ({ index, as: Comp = 'div', isSelected, ...props }) {
  return <Comp {...props} />;
}

Same Components as react-tabs and reach-tabs but with context

import { Tabs, TabList, Tab, TabPanels, TabPanel } from '../Tabs';

export const App = () => (
  <Tabs>
    <div className="header">
      <TabList>
          <Tab>aa</Tab>
          <Tab>bb</Tab>
        </TabList>
    </div>
    <div className="main">
      <TabPanels>
        <TabPanel>AA</TabPanel>
        <TabPanel>BB</TabPanel>
      </TabPanels>
    </div>
  </Tabs>
);