Horizontal scroll for tabs

[maxclaus]

I have a case where I would need to scroll horizontally because there are too many open tabs. Would you be interested if I prepare a PR adding support for it? Mockup:

< | tab 1 | tab 2 | tab 3 | tab 4 | > 
-------------------------------------
|              Panel                |
-------------------------------------

PS: The scroll would be only for the TabList.

[dmitry]

This one is part of the responsiveness: https://github.com/reactjs/react-tabs/issues/142

[maxclaus]

In my case a horizontal scroll with button left/right works better than the approach used by that library with "show more" and accordion.

[karevn]

I think it's out of scope. It's better to allow for wrapping TabList in a higher order components, use higher order components for tabs and thus different scrolling strategies can be implemented for specific use case.

[ZowWeb]

I achieved this by using react-slick library and wrapping Tabs inside Slider.

[berpcor]

@ZowWeb, how did you do that? I get error: Failed prop type: Invalid prop tabIndex of type number supplied to Tab, expected string. Structure is the following:

                  <TabList>

                     <Slider {...sliderProps}>
                         <Tab>1</Tab>
                         <Tab>2</Tab>
                         <Tab>3</Tab>
                    </Slider>
                     
                 </TabList>

[TechStudent10]

Any update on this?

[ZowWeb]

let me know if this works for you!

import { Tabs, Tab, TabList, TabPanel } from 'react-tabs'
import Slider from 'react-slick'

<Tabs>
  <TabList>
    <Slider {...settings}>
      {items.map((item, i) => <Fragment key={i}><Tab>{item.title}</Tab></Fragment>)}
    </Slider>
  </TabList>
  {items.map((item, i) => <TabPanel key={i} dangerouslySetInnerHTML={{ __html: item.content }} />)}
</Tabs>

[TechStudent10]

let me know if this works for you!

import { Tabs, Tab, TabList, TabPanel } from 'react-tabs'
import Slider from 'react-slick'

<Tabs>
  <TabList>
    <Slider {...settings}>
      {items.map((item, i) => <Fragment key={i}><Tab>{item.title}</Tab></Fragment>)}
    </Slider>
  </TabList>
  {items.map((item, i) => <TabPanel key={i} dangerouslySetInnerHTML={{ __html: item.content }} />)}
</Tabs>

Nope, styling gets messed up.

[ZowWeb]

make Slider flex, should prob fix ur styling issues. If it doesn't, feel free to share before/after how the styling looks