React MUI Chip 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.

In this article, we’ll be discussing React MUI Chip Display. A chip is a compact element that represents an input, attribute, or action. They also allow the users to input information, make selections, filter the content, or trigger any actions.

React MUI Chip Props:

• label: It displays the text inside the chip.
• variant: It changes the appearance of the chip as a ‘contained’ chip or as an ‘outlined’ chip.
• size: It changes the size of the chip.
• color: It changes the fill color or outline color of the chip.
• clickable: If it is true, the chip will show subtle effects when it has hovered over.
• onClick: It denotes that when the chip is clicked, the function given in the onClick prop is called.
• onDelete: It adds a little delete icon at the end of the chip.
• deleteIcon: It takes in an element as its value and overrides the default delete icon.
• icon: It takes in an element, generally an icon component, and adds it to the prefix of the chip’s label. 
• avatar: It takes in an element as its value and adds an avatar to the prefix of the chip’s label.
• classes: It is used to override the CSS styles applied on the chip.
• component: It changes the root node used by the chip. It can be an HTML element or any other component.
• disabled: It disables the chip.
• sx: It overrides the default CSS styles applied on the chip.

Syntax:

<Chip label="Submit" />

Creating React Project:

Step 1: To create a react app, you need to install react modules through the 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:

npm start

Example 1: Below example demonstrates the React MUI clickable chip of different colors and sizes.

Javascript

import React from "react";
import Chip from "@mui/material/Chip";
import Stack from "@mui/material/Stack";

function App() {

    const handleClick = () => {
        alert('Clicked a chip');
    };

    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Chip Display</h2>
            </div>
            <div>
                <Stack direction="row" spacing={1} style=
                    {{ justifyContent: 'center' }}>
                    <Chip label="Small" size="small"
                        color="primary" onClick={handleClick} />
                    <Chip label="Small" size="small"
                        color="success" onClick={handleClick} />
                    <Chip label="Medium" size="medium"
                        variant="outlined" color="primary"
                        onClick={handleClick} />
                    <Chip label="Medium" size="medium"
                        variant="outlined" color="success"
                        onClick={handleClick} />
                </Stack>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI avatar and icon-based chip. We can add ornaments at the beginning of the chip component. We use the ‘avatar’ prop to add an avatar and use the ‘icon’ prop to add an icon.

Javascript

import React from "react";
import Chip from "@mui/material/Chip";
import Stack from "@mui/material/Stack";
import { Avatar } from "@mui/material";
import FaceIcon from '@mui/icons-material/Face';

function App() {
    const handleClick = () => {
        console.log("Clicked");
    };

    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Chip Display</h2>
            </div>
            <div>
                <Stack direction="row" spacing={1}
                    style={{ justifyContent: "center" }}>
                    <Chip
                        label="GeeksforGeeks"
                        variant="contained"
                        onClick={handleClick}
                        icon={<FaceIcon />}
                    />
                    <Chip
                        label="GeeksforGeeks"
                        variant="outlined"
                        color="success"
                        onClick={handleClick}
                        avatar={<Avatar alt="Gfg" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" />}
                    />
                </Stack>
            </div>
        </div>
    );
}

export default App;

Output:

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