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.

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 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

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.

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/