How to Integrate Tabs in React 18 with React Bootstrap

Last Updated on March 4, 2024 by Digamber in React JS

Tabs are one of the best UI elements for displaying multiple contents in a single window. In general, it is a navigation element ideally used in web and mobile applications. It lets users switch between multiple panels on a single screen.

As a React developer, seldom you might want to create a tabs component in React application. Building a tabs component from scratch is a pain, and it takes time. There is no compulsion to make it from the absolute beginning.

What if we told you, you can implement tabs functionality in React without taking much time.

In this tutorial, we will ascertain how to create a tabs component in React js app using the third-party packages.

The module we are talking about is popularly known as Bootstrap. For integrating tabs in React, we will be installing Bootstrap 5 and React Bootstrap altogether.

Why so? React Bootstrap is a separate implementation for JavaScript-based modules; after installing React bootstrap, you won’t have to use jQuery.

Let us follow the given process to make the tabs component in React.

React Js Create Tabs Component using React Bootstrap Example

• Step 1: Generate React App
• Step 2: Make Component File
• Step 3: Install React Bootstrap Module
• Step 4: Build Tabs Component
• Step 5: Register Tabs in App Js
• Step 6: Serve React Application

Generate React App

To make the new react app, execute the given command from the terminal’s command prompt.

npx create-react-app react-tabs

Anyhow, If you already created the react app then get into the app directory.

cd react-tabs

Make Component File

Inside the app folder, create another folder and name it /components. In this directory, all the component files will reside.

Hence, make a new file and name it /ReactTabs.js. Here is what a basic functional component looks like.

import React from 'react'

export default function ReactTabs() {
  return (
    <></>
  )
}

Install React Bootstrap Module

By running the given command, you will be able to add the bootstrap and react-bootstrap packages at the same time.

Without wasting much time execute the given command.

npm i react-bootstrap bootstrap --legacy-peer-deps

Build Tabs Component

Open the ReactTabs.js component file and insert the given code into the file.

import React, { useState } from 'react'
import { Tab, Tabs } from 'react-bootstrap'

export default function ReactTabs() {
  const [tabKey, initTabKey] = useState('one')

  return (
    <div>
      <h2 className="mb-3">React Js Tabs Component Example</h2>

      <Tabs activeKey={tabKey} onSelect={(e) => initTabKey(e)}>
        <Tab eventKey="one" title="Tab 1">
          <p>Tab 1</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed enim
            semper mi congue vestibulum.
          </p>
        </Tab>
        <Tab eventKey="two" title="Tab 2">
          <p>Tab 2</p>
        </Tab>
        <Tab eventKey="three" title="Tab 3">
          <p>Tab 3</p>
        </Tab>
        <Tab eventKey="four" title="Tab 4">
          <p>Tab 4</p>
        </Tab>
      </Tabs>
    </div>
  )
}

Import the Tab and Tabs named modules from the ‘react-bootstrap’ library.

The Tabs module is the wrapper for the Tabs component, manage the tabs’ behavior or data using the useState hook.

Register Tabs in App Js

Now, ReactTabs component has to be imported in the App.js file. At the same time trigger the component using the App() function.

import React from 'react'

import ReactTabs from './components/ReactTabs'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

function App() {
  return (
    <div className="container mt-3">
      <ReactTabs />
    </div>
  )
}

export default App

Serve React Application

To run the react application run the given command from the command-prompt.

npm start

You can now see the app in the action on the browser:

http://localhost:3000

The Bottom Line

In this tutorial, we shared significant details on how to add the bootstrap tabs component in React js app simply.

We built the dynamic tabbed interfaces in React and managed to show multiple contents on a single screen.

You can also create a custom tab layout using React bootstrap, manage the animation, and most importantly, you can utterly control the tabs component behavior using the bootstrap tabs API.