Clue Mediator

How to create tabs in React

๐Ÿ“…February 16, 2022
๐Ÿ—ReactJS

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

Output - How to create tabs in React - Clue Mediator

Output - How to create tabs in React - Clue Mediator

Steps to create tabs in React

  1. Create a React application
  2. Install NPM package
  3. Add tabs in the react component
  4. Output

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..!! ๐Ÿ™‚

Demo & Source Code

GitHub Repository StackBlitz Project