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
- validation-in-react" title="Min and Max length input validation in React">Min and Max length input validation in React
- Create a tags input component in React
- react-select-dropdown" title="How to add an icon in the react-select dropdown">How to add an icon in the react-select dropdown
- Create guided tours in the React app
- password-strength-checker-in-react" title="Password Strength Checker in React">Password Strength Checker in React
Demo Application
Output - How to create tabs in React - Clue Mediator
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`.
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.
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.
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
Use the following structure to render the tabs.
<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.
App.js
import React from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
function App() {
return (
<div class="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..!! ๐