0

Help me combine those two packages, please.

I need slider for tabs, which looks something like that:

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

What I do? I wrap tabs I need to slider:

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


const sliderProps = {
    dots: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    centerMode: true,
    variableWidth: true,
    infinite: false
};

...

<Tabs>
    <TabList>
        <Slider {...sliderProps}>
                
            <Tab>1</Tab>
                                        
            <Tab>2</Tab>
                     
            <Tab>3</Tab>
                     
        </Slider>
    </TabList>
    <TabPanel>
      Sample content 1
    </TabPanel>
    <TabPanel>
      Sample content 2
    </TabPanel>
    <TabPanel>
      Sample content 3
    </TabPanel>
</Tabs>

But when I click any tab first tab becomes active and future clicks doesn't work. And in colsole I get error: Warning: Failed prop type: Invalid prop `tabIndex` of type `number` supplied to `Tab`, expected `string`.

Live Code

John Smith
  • 1,204
  • 3
  • 22
  • 42

1 Answers1

2

If you are using react-tabs library, inside the Slider component, you need a parent component for the Tab component. Like this:

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

<Tabs>
    <TabList>
        <Tab>1</Tab>
        <Tab>2</Tab>
        <Tab>3</Tab>
    </TabList>
    <TabPanel>
      Sample content 1
    </TabPanel>
    <TabPanel>
      Sample content 2
    </TabPanel>
    <TabPanel>
      Sample content 3
    </TabPanel>
</Tabs>
Winston Jade Molit
  • 19
  • 5
  • Thank you for your feedback Winston Jade Molit. Probably this is my bad that I didn't show the whole portion of code. I've updated the question. I have parent element which is TabList but the error I've described still there. – John Smith Nov 15 '20 at 13:20
  • I've created live version for you could play around with code and see what I mean, when I say that it doesn't work. ) – John Smith Nov 15 '20 at 15:40