React-Bootstrap Tabs Component

React-Bootstrap is a front-end framework that was designed keeping react in mind. Tabs Component provides a way to make form dynamic tabbed interfaces. With the help of tabs, the user can switch between components present in given different tabs. We can use the following approach in ReactJS to use the react-bootstrap tabs Component.

React-Bootstrap Tabs Component

React-Bootstrap Tabs are switchable containers that provide transitions in the content sections withina single component. We can easily import and use the tab component from react-bootstrap. Check this article for the React-Bootstrap installation.

React-Bootstrap Tabs Syntax:

This is the syntax of React-Bootstrap Tabs Component.

<Tabs defaultActiveKey={1}>
    <Tab eventKey={1} title="Tab 1">
        Tab 1 content
    </Tab>
    <Tab eventKey={2} title="Tab 2">
        Tab 2 content
    </Tab>
    <Tab eventKey={3} title="Tab 3" disabled>
        Tab 3 content
    </Tab>
</Tabs>;

React-Bootstrap Tabs Component Props:

React-Bootstrap Tabs Component includes Tabs, Tab, TabContainer, TabContent, TabPane.

React-Bootstrap Tabs Props:

• activeKey: It is used to mark the tab as active based on the matching event key.
• defaultActiveKey: It is used to indicate the default active key that is selected on start.
• id: It is the HTML id attribute required when no generateChildId prop is specified.
• mountOnEnter: It is used to mount tabs.
• onSelect: It is a callback function that is triggered when a tab is selected.
• transition: For all children <TabPane>, it is used to set a default animation strategy.
• unmountOnExit: It is used to unmount the tabs.
• variant: It is used to define the navigation style.

React-Bootstrap Tab Props:

• disabled: It is used to disable the component.
• eventKey: It is basically a unique identifier for the component.
• tabClassName: It is used to add the class name for the tab styling.
• title: It is used to indicate the title for the tab component.

React-Bootstrap TabContainer Props:

• activeKey: It is used for the eventKey of the current tab which is active.
• defaultActiveKey: It is used for the default eventKey for the tab.
• generateChildId: It is a function that is used to generate the unique id for child tab <TabPane>s and <NavItem>s  on the basis of eventKey and type which is passed as a parameter to this function.
• id: It is the normal HTML id attribute for identification.
• mountOnEnter: It is used to wait until first “enter” transition to mount the tab.
• onSelect: It is a callback that is triggered when a tab is selected.
• transition: For all children, it is used to set a default animation strategy.
• unmountOnExit: It is used to unmount the tab.

React-Bootstrap TabContent Props:

• as: It can be used as a custom element type for this component.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

React-Bootstrap TabPane Props:

• active: It is used to toggle the active state of the TabPane.
• aria-labelledby: It is used to pass the aria labeled attribute to TabPane.
• as: It can be used as a custom element type for this component.
• eventKey: It is used a key that associates TabPane with help of its controlling NavLink
• id: It is the normal HTML id attribute for identification.
• mountOnEnter: It is used to wait until first “enter” transition to mount the tab.
• onEnter: When animation is not false, it is used to transition the OnEnter callback.
• onEntered: When animation is not false, it is used to transition the OnEntered callback.
• onEntering: When animation is not false, it is used to transition the OnEntering callback.
• onExit: When animation is not false, it is used to transition the OnExit callback.
• onExited: When animation is not false, it is used to transition the OnExited callback.
• onExiting: When animation is not false, it is used to transition the OnExiting callback.
• transition: It is used to show the animation when hiding or showing the <TabPane>s
• unmountOnExit: It is used to unmount the tab.
• bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.

React-Bootstrap Tabs Component Example:

This example demonstrates creating a simple Tab using the React-Bootstrap Tabs Component.

JavaScript

// Filename - App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';

export default function App() {
  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>React-Bootstrap Tab Component</h4>
      <Tabs defaultActiveKey="second">
        <Tab eventKey="first" title="Dashboard">
          Hii, I am 1st tab content
        </Tab>
        <Tab eventKey="second" title="Setting">
          Hii, I am 2nd tab content
        </Tab>
        <Tab eventKey="third" title="Aboutus">
          Hii, I am 3rd tab content
        </Tab>
      </Tabs>
    </div>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: