How to create Tabs in ReactJS
In this tutorial, we will learn how to create Tabs in ReactJS in different ways.
Create a new react app using the create-react-app
npx create-react-app tab
Move inside to the created tab folder using the cd command.
cd tab
Creating Tabs in ReactJS using react-tabs
Requirements
- react-tabs – use npm i react-tabs command to install react-tabs
We have used the default CSS style in react-tabs. The TAB 1,2 and 4 are active tabs and DISABLED TAB is disabled. Modify App.js in the src folder to the code below.
import "./App.css"; import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; import "react-tabs/style/react-tabs.css"; function App() { return ( <div className="App"> <h1>Create Tabs in ReactJS using react-tabs</h1> <Tabs defaultIndex={0} > <TabList> <Tab>TAB 1</Tab> <Tab>TAB 2</Tab> <Tab disabled={true}>DISABLED TAB</Tab> <Tab>TAB 4</Tab> </TabList> <TabPanel> <h2>TAB NO: 1</h2> </TabPanel> <TabPanel> <h2>TAB NO:2</h2> </TabPanel> <TabPanel> <h2>TAB NO:3</h2> </TabPanel> <TabPanel> <h2>TAB NO:4</h2> </TabPanel> </Tabs> </div> ); } export default App;
Run the code using the command below
npm start
OUTPUT
Image:
Creating Tabs in ReactJS using material-ui
Requirements
- material-ui – use npm i @material-ui/core command to install material-ui
We have used React.useState() to maintain the tab number information across the App component. Modify App.js in the src folder to the code below.
import React from "react"; import Tab from "@material-ui/core/Tab"; import Tabs from "@material-ui/core/Tabs"; const App = () => { const [value, setValue] = React.useState(0); return ( <div style={{ marginLeft: "15%", marginRight: "15%", }} > <h2>Create Tabs in ReactJS using material-ui</h2> <Tabs value={value} textColor="primary" indicatorColor="primary" onChange={(e, val) => { setValue(val); }} > <Tab label="TAB One" /> <Tab label="TAB Two" /> <Tab label="Disabled TAB" disabled /> <Tab label="TAB Four" /> </Tabs> <h3>TAB NO: {value + 1} </h3> </div> ); }; export default App;
Run the code using the command below
npm start
OUTPUT
Creating Tabs in ReactJS without using other modules
We have used React.getState() and buttons,ul in HTML to create Tabs. Modify App.js in the src folder to the code below.
import './App.css'; import React from 'react'; function App() { const [value,setValue] = React.useState(0) const actArray = [] for(let i=0;i<4;i++){ if (i===value){ actArray.push('btn active') } else{ actArray.push('btn') } } return ( <div className="App"> <h1>Create Tabs in ReactJS without using other modules</h1> <ul style={{listStyle:'none', marginLeft:'30%'}}> <li style={{float:'left'}}><button type='button' className={actArray[0]} onClick={()=>{setValue(0)}}>TAB One</button></li> <li style={{float:'left'}}><button type='button' className={actArray[1]} onClick={()=>{setValue(1)}}>TAB Two</button></li> <li style={{float:'left'}}><button type='button' className={actArray[2]} disabled onClick={()=>{setValue(2)}}>Disabled TAB</button></li> <li style={{float:'left'}}><button type='button' className={actArray[3]} onClick={()=>{setValue(3)}}>TAB Four</button></li> </ul> <br/><br/> <div> <h2>TAB NO: {value+1}</h2> </div> </div> ); } export default App;
We used our own CSS styling, append the below code to the App.css file in the src folder.
.btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; margin: 5px } .active, .btn:hover { background-color: #666; color: white; }
Run the code using the command below
npm start
OUTPUT
Leave a Reply