React MUI Rating Input
Last Updated :
24 Jan, 2023
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 Rating input. A rating input provides insight into others’ opinions and may also allow the user to submit a rating of their own choice.
Rating input Variants:
- Basic rating: A basic rating input variant provides four types: controlled, read-only, disabled, and no-value.
- Rating precision: By using the precision prop we can define the minimum increment value change allowed in a rating input.
- Hover feedback: We can display a label on hover which helps the user pick the correct rating value.
- Sizes: Sizes can be changed by a small or large rating input using the size prop.
- Customization: A rating input can get customized by changing the rating icons, colors, etc.
- Radio group: The rating is implemented with a radio group, set highlightSelectedOnly to restore the natural behavior.
- Accessibility: To be more accessible provide a name prop while using a radio group, use labels, and use different colors and icon shapes to distinguish multiple ratings.Â
- API: The APIs are:
Â
Syntax:
<Rating />
Creating React Project:
Step 1: To create a react app, 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 rating input with precision.
Javascript
import { Rating, Typography } from "@mui/material" ;
import * as React from "react" ;
function App() {
return (
<center>
<div>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h2>React MUI Rating input</h2>
</div>
<div style={{ width: "50%" }}>
<Typography>Rate our course</Typography>
<Rating name= "half" defaultValue={3.5}
precision={0.5} size= "large" />
</div>
</center>
);
}
export default App;
|
Output:
Â
Example 2: Below example demonstrates the React MUI rating inputs with different sizes.
Javascript
import { Rating, Typography } from "@mui/material" ;
import * as React from "react" ;
function App() {
return (
<center>
<div>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h2>React MUI Rating input</h2>
</div>
<div style={{ width: "50%" }}>
<Typography>Rate our course</Typography>
<Rating name= "rate" defaultValue={3} size= "small" />
<Typography>Rate our course</Typography>
<Rating name= "rate" defaultValue={3} />
<Typography>Rate our course</Typography>
<Rating name= "rate" defaultValue={3} size= "large" />
</div>
</center>
);
}
export default App;
|
Output:
Â
Reference: https://mui.com/material-ui/react-rating/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...