React Tutorials

How to Integrate Tabs in React Js with React Bootstrap

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

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’ behaviour 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 behaviour using the bootstrap tabs API.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Redux Handle API Calls with Thunk Middleware Tutorial

In this post, we will learn how to work with HTTP requests in the Redux…

1 day ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

4 days ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

1 week ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

1 week ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago

How to Handle Global State in React js using Context API

React Js Global state management with createContext hook example; In this tutorial, we will help…

2 weeks ago