React Js Bootstrap Dynamic Tabs Component Tutorial

React 17 Bootstrap Tabs example; Throughout this short guide, you will find out how to implement the Tabs UI element in React application.

In order to build the Tabs component in React, we will use the Bootstrap and React Bootstrap modules.

Tabs are important user interface elements; tabs are generally used to add multiple content sections in the UI layout and make only one section viewable at a time.

The React Bootstrap is the profound front-end framework mainly used to add Bootstrap JavaScript components in the React js environment. It lets you integrate multiple bootstrap components in React app without using jQuery.

We have conjugated several steps below for integrating bootstrap tabs in React application; make sure to go through every step in the same hierarchy.

React Bootstrap Tabs Component Example

  • Step 1: Set Up React Project
  • Step 2: Add React Bootstrap Package
  • Step 3: Create Component File
  • Step 4: Implement Tabs in React
  • Step 5: Update App.js File
  • Step 6: Run Application Server

Set Up React Project

Our journey of creating a dynamic tabbed interface begins by installing a brand new React application.

Ensure that you have installed node and npm on your development system.

npx create-react-app react-bootstrap-howdy

Once the app is ready, step inside of it.

cd react-bootstrap-howdy

Add React Bootstrap Package

By using the following command simultaneously, install the bootstrap and react-bootstrap libraries in the React application.

npm install react-bootstrap bootstrap

In order to harness the power of bootstrap front-end ui framework, add the module’s CSS in the App.js file.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

Create Component File

In the project folder, make the /components folder with /BotTabs.js file.

Given below is the basic code that formulates a functional component in React.

import React from 'react'

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

Implement Tabs in React

Next, head over to BotTabs.js file, now carefully copy the given code and add into the file.

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

export default function BotTabs() {
  const [key, setKey] = useState('one')

  return (
    <>
      <h2>React Bootstrap Tabs Component Example</h2>

      <Tabs id="tinyTab" activeKey={key} onSelect={(e) => setKey(e)}>
        <Tab eventKey="one" title="Tab One">
          <p>Home</p>
          <p>
            Ut at rutrum nunc. Nam tincidunt facilisis finibus. Nulla facilisi.
            Phasellus id tincidunt metus. Mauris id malesuada nibh, vel
            dignissim metus. Nullam tempus eget velit id convallis. Etiam in
            dolor vel ligula pharetra luctus at a purus. Nulla porttitor nibh
            sed massa ornare, ac imperdiet est sagittis.
          </p>
        </Tab>
        <Tab eventKey="two" title="Tab Two">
          <p>Tab Two</p>
        </Tab>
        <Tab eventKey="three" title="Tab Three">
          <p>Tab Three</p>
        </Tab>
      </Tabs>
    </>
  )
}

Update App.js File

The App.js is the parent component in React that controls the view part in React.

Therefore, we must import the tab component and register the BotTabs component tag inside the return method.

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import BotTabs from './components/BotTabs'

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

export default App

Run Application Server

Finally, we have to invoke the react app server, without further ado type the command onto the terminal and hit enter.

npm start

After the server is running, open the browser on provided app url and view the component on the browser.

React Js Bootstrap Dynamic Tabs Component Tutorial

Conclusion

In this React tabs component example, we have ascertained how to integrate Tabs in React js component using the React Bootstrap library.

We gave the simple tab example in this guide; however, you may check out this official documentation.

You may create vertical tabs in react, set or create custom tab layout in react, set or remove animation in react tabs.

Moreover, you can entirely control the behaviour of react tabs with react-bootstrap.