Whenever the user wants to group a related option, the ToggleButtonGroup component is used. Material UI for ReactJS has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to use ToggleButtonGroup component.
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 material-ui module using the following command:
npm install @mui/material npm install @mui/icons-material
Project Structure: It will look like the following.
Project Structure
Example 1: In this example, we will create a ToggleGroup component to toggle between different alignment values. Please update file App.js like below:
Filename: App.js
Javascript
import { FormatAlignCenter, FormatAlignJustify, FormatAlignLeft } from '@mui/icons-material';import { ToggleButton, ToggleButtonGroup } from '@mui/material';import React from 'react';export default function App() { const [currentAlignment, setCurrentAlignment] = React.useState('center'); return ( <div style={{ display: 'block', padding: 30 }}> <h1 style={{ color: 'green' }}> neveropen </h1> <h4> How to use ToggleGroup Component in ReactJS? </h4> <ToggleButtonGroup value={currentAlignment} onChange={(event, newAlignment) => { setCurrentAlignment(newAlignment); }} exclusive aria-label="Demo Text Alignment" > <ToggleButton value="justify" aria-label="justified" disabled> <FormatAlignJustify /> </ToggleButton> <ToggleButton value="left" aria-label="left aligned"> <FormatAlignLeft /> </ToggleButton> <ToggleButton value="center" aria-label="centered"> <FormatAlignCenter /> </ToggleButton> </ToggleButtonGroup> </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:
Example 2: In this example, we will create a ToggleGroup component to toggle among different values, and in this example, we will also allow multi-selection of values. Please update file App.js like below:
Filename: App.js
Javascript
import { ArrowDropDown, FormatBold, FormatColorFill, FormatItalic, FormatUnderlined } from '@mui/icons-material';import { ToggleButton, ToggleButtonGroup } from '@mui/material';import React from 'react';export default function App() { const [formats, setFormats] = React.useState(() => ['bold', 'italic']); const handleFormat = (event, newFormats) => { setFormats(newFormats); }; return ( <div style={{ display: 'block', padding: 30 }}> <h1 style={{ color: 'green' }}> neveropen </h1> <h4> How to use ToggleGroup Component in ReactJS? </h4> <ToggleButtonGroup value={formats} onChange={handleFormat} aria-label="text formatting" > <ToggleButton value="bold" aria-label="bold"> <FormatBold /> </ToggleButton> <ToggleButton value="italic" aria-label="italic"> <FormatItalic /> </ToggleButton> <ToggleButton value="underlined" aria-label="underlined"> <FormatUnderlined /> </ToggleButton> <ToggleButton value="color" aria-label="color" disabled> <FormatColorFill /> <ArrowDropDown /> </ToggleButton> </ToggleButtonGroup> </div> );} |
Steps to run the application:
npm start
Output:
Reference: https://mui.com/material-ui/react-toggle-button/
