How to usematerialUI Divider in ReactJS
We can also use divider component form UI libraries like MUI to use the Divider component in react
Step to Intall MUI: Install the material-ui modules using the following command.
npm install @material-ui/core
Dependencies list after installing packges
"dependencies": {
"@material-ui/core": "^4.12.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: This example uses material UI divider to add divider component in React JS
Javascript
// Filename - App.js import React from "react" ; import Divider from "@material-ui/core/Divider" ; import ListItem from "@material-ui/core/ListItem" ; import ListItemText from "@material-ui/core/ListItemText" ; import List from "@material-ui/core/List" ; export default function App() { return ( <div style={{ display: "block" , padding: 30 }}> <h4> How to use Divider Component in ReactJS? </h4> <List component= "nav" > <ListItem button> <ListItemText primary= "1 Divider Below this list item" /> </ListItem> <Divider /> <ListItem button divider> <ListItemText primary= "2 Divider Below this list item" /> </ListItem> <Divider /> <br /> <Divider /> </List> </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.
How to use Divider Component in ReactJS?
A divider is a thin line that groups content in lists and layouts. To use Diveder Component in React JS we can either create one or we can also import it from other UI libraries like Bootstrap, MaterialUI, etc.