How To Customize React Tabs?

An accessible and easy tab component for ReactJS!

Step 1: Install the package
npm install react-tabs
Step 2: then create the component
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

const ReactTabs = () => {
    return (
        <>
            <Tabs>
                <TabList>
                  <Tab>Title 1</Tab>
                  <Tab>Title 2</Tab>
                </TabList>

                <TabPanel>
                  <h2>Any content 1</h2>
                </TabPanel>
                <TabPanel>
                  <h2>Any content 2</h2>
                </TabPanel>
            </Tabs>
        </>
    );
}

export default ReactTabs;

More info https://www.npmjs.com/package/react-tabs

Leave a Reply

Your email address will not be published.