How to create tabs in React
When you are working with a large scale react application then you may need to add tabs in React. Here we will use the NPM Package to create tabs in the React component.
Checkout more articles on ReactJS
Demo Application
Steps to create tabs in React
1. Create a React application
Run the following command to create a react application using the create-react-app.
1 | npx create-react-app react-tabs-component |
2. Install NPM package
Here, we will use the react-tabs to create tabs in React. Run the following command to install the package in the react app.
1 | npm i react-tabs |
3. Add tabs in the React component
The react-tabs is an accessible and easy tab component for ReactJS. In the first, step we will import the tab component from the react-tabs and add the CSS in the component.
1 2 | import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import 'react-tabs/style/react-tabs.css'; |
Use the following structure to render the tabs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <Tabs> <TabList> <Tab>Title 1</Tab> <Tab>Title 2</Tab> <Tab>Title 3</Tab> <Tab>Title 4</Tab> </TabList> <TabPanel> <h3>Tab 1</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </TabPanel> <TabPanel> <h3>Tab 2</h3> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </TabPanel> <TabPanel> <h3>Tab 3</h3> </TabPanel> <TabPanel> <h3>Tab 4</h3> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p> </TabPanel> </Tabs> |
We can also disable the tabs or set the default index by passing the props. There are so many props available to customize the tabs. You can refer to this document.
Let’s combine all the code together and see how it looks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | import React from 'react'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import 'react-tabs/style/react-tabs.css'; function App() { return ( <div className="app"> <h3>How to create tabs in React - <a href="https://www.cluemediator.com" target="_blank" rel="noreferrer noopener">Clue Mediator</a></h3> <Tabs defaultIndex={1}> <TabList> <Tab>Title 1</Tab> <Tab>Title 2</Tab> <Tab disabled>Title 3</Tab> <Tab>Title 4</Tab> </TabList> <TabPanel> <h3>Tab 1</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </TabPanel> <TabPanel> <h3>Tab 2</h3> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> </TabPanel> <TabPanel> <h3>Tab 3</h3> </TabPanel> <TabPanel> <h3>Tab 4</h3> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p> </TabPanel> </Tabs> </div> ); } export default App; |
4. Output
Run the application and check the output in the browser.
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂
