Tabs + react slick slider.

[berpcor]

Live code
Could you help me make it work, please?
As you can see in console, there is an error - Failed prop type: Invalid prop tabIndexof typenumbersupplied toTab, expected string.

[berpcor]

Perfect, thanks a lot. For those, who faced the same problem, the decision is: deleted react tabs, did all manually.

[Joep van Liempd]

I'm reading some anger in your sarcasm, which I'm guessing comes from unrealistic expectations. This an issue you opened on the repo of an open source project — no one here owes you anything. In any case, as I see it, this use case (dealing with overflowing tabs) is outside the scope of react-tabs.

That said, I'm pretty sure number should be a valid prop type for tabIndex to receive, and a PR fixing that in src/components/Tab.js would probably be welcomed. That wouldn't have changed the behaviour here, though. The <Slider> component you've included does too much to its children for react-tabs to be able to work in conjunction with it.

[Ihor]

I think the thing is that react-tabs need a very strict order of component-tree, which gets broken through the react-slick.

Example: react-tabs needs something like this:

<Tabs> <TabList> <Tab1>1</Tab1> <Tab2>2</Tab2> <Tab3>3</Tab3> </TabList> </Tabs>

If you are using react-slick to wrap tabs, it creates three levels of wrap-divs between TabList and all your tabs. So the props from TabList don't come to the tabs so it gets broken. But it is only an assumption. I tried to wrap the things with custom components like described in the docs of react-tabs, but it did not work...

[Yana Vozniuk]

Hey-hey 👋
Currently, I have the same issue but I think that I found a solution for it
So, what we need to do

   const CustomTab = ({onClick, children}) => {
     return <div onClick={onClick}>{children}</div>
   };
   CustomTab.tabsRole = 'Tab';


   const [tabIndex, setTabIndex] = useState(0);

    return (
      <div style={style}>
        <Tabs
          selectedIndex={tabIndex}
          onSelect={index => setTabIndex(index)}
        >
          <TabList>
            <Slider {...settings}>
              <CustomTab onClick={()=> setTabIndex(0)}>Title 1</CustomTab>
              <CustomTab onClick={()=> setTabIndex(1)}>Title 2</CustomTab>
              <CustomTab onClick={()=> setTabIndex(2)}>Title 3</CustomTab>
              <CustomTab onClick={()=> setTabIndex(3)}>Title 4</CustomTab>
            </Slider>
          </TabList>
          <TabPanel>1</TabPanel>
          <TabPanel>2</TabPanel>
          <TabPanel>3</TabPanel>
          <TabPanel>4</TabPanel>
        </Tabs>
      </div>

And of course, add styles that we'll need