React MUI Divider Display

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

React MUI Divider Display is a divider is a thin line that separates different components and is also used in grouping the content in lists and layouts of web pages.

Divider variants:

• List dividers: In this, the divider renders as a <hr> by default. We can also save rendering this DOM element with the help of the divider prop on the ListItem component.
• HTML5 specification: In this, ensure that Divider is rendered as an <li> element to match the HTML5 specification.
• Inset dividers: In this, the divider has some distance between the element and the parent element. 
• Subheader dividers: In this, the subheader divider component is rendered after the main divider.
• Middle divider: In this, the divider component is rendered in the middle.
• Dividers with text: In this, the dividers are rendered with text content.
• Vertical divider: Here the divider is rendered vertically. It is rendered with the help of an orientation prop. It has two variants:  Vertical with variant middle and Vertical with text.
• API: The <Divider/> API is used to render a divider component.

Syntax:

<Divider />

Creating React Project:

Step 1: To create a react app, you need to install react modules through npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure:

Step to Run Application: Open the terminal and type the following command.

npm start

Example 1: Below example demonstrates the React MUI dividers in a list group.

Javascript

import { Divider, List, ListItemText } from "@mui/material";
import React from "react";

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: 'green' }}>
                    GeeksforGeeks</h1>
                <h2>React MUI Divider Display</h2>
            </div>
            <div>
                <List sx={{
                    bgcolor: '#1AB519',
                    color: 'white',
                    padding: 2,
                    width: '10%'
                }}>
                    <ListItemText>Array</ListItemText>
                    <Divider sx={{ bgcolor: 'white' }} />
                    <ListItemText>Stack</ListItemText>
                    <Divider sx={{ bgcolor: 'white' }} />
                    <ListItemText>Queue</ListItemText>
                    <Divider sx={{ bgcolor: 'white' }} />
                    <ListItemText>Linked List</ListItemText>
                </List>
            </div>
        </center>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI dividers with text.

Javascript

import { Divider, List } from "@mui/material";
import React from "react";

function App() {
    return (
        <center>
            <div>
                <h1 style={{ color: 'green' }}>
                    GeeksforGeeks</h1>
                <h2>React MUI Divider Display</h2>
            </div>
            <div>
                <List>
                    <Divider sx={{ color: '#1AB519' }}
                        textAlign="left">Arrays</Divider>
                    <Divider sx={{ color: '#1AB519' }}
                        textAlign="center">Stack</Divider>
                    <Divider sx={{ color: '#1AB519' }}
                        textAlign="right">Queue</Divider>
                </List>
            </div>
        </center>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/react-divider/