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.
                                
How to pass data from one component to other component in ReactJS ?
ReactJS useNavigate() Hook
Re-rendering Components in ReactJS
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript