React-Bootstrap Tabs Component - GeeksforGeeks

24 Sep, 2021
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.
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.
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.
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.
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.
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.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:cd foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:npm install react-bootstrap 
npm install bootstrap
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-bootstrap 
npm install bootstrap
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
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:
Reference: https://react-bootstrap.github.io/components/tabs/
anikakapoor
React-Bootstrap
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to pass data from one component to other component in ReactJS ?
React-Router Hooks
Re-rendering Components in ReactJS
How to set background images in ReactJS ?
How to create a table in ReactJS ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
Convert a string to an integer in JavaScript