Tabs below content

[rafatwork]

I want to display the tab content above the tabs, eg:

      <Tabs>
        <TabPanel>
          This is content for tab 1
        </TabPanel>
        <TabPanel>
          This is content for tab 2
        </TabPanel>
        <TabPanel>
          This is content for tab 3
        </TabPanel>
        <TabList>
          <Tab>Tab 1</Tab>
          <Tab>Tab 2</Tab>
          <Tab>Tab 3</Tab>
        </TabList>
      </Tabs>

Unfortunately, this does not work. Clicking the tabs doesn't do anything.
Is this possible with react-tabs? If yes, how?

[joepvl]

I think this doesn't work because of how react-tabs uses the order of its children to determine which tabs match which panel. I've personally solved this problem in the past by using Flexbox in my CSS. Basically, you put TabList at the top in the DOM (by putting it at the top in your JSX ), set display: flex and flex-direction: column on <Tabs>, order: 1 on <TabPanel>, and order: 2 on <TabList>. Your TabList will now appear below your TabPanels in your UI.
Obviously this only works when targetting browsers that support Flexbox.

[rhys-vdw]

So I needed this feature and attempted a fork to add it to react-tabs. I had a lot of trouble getting it working and ended up going for a different solution using React's context feature. Hope someone finds it useful.