In this React tutorial, we will learn how to create a Star Rating component in React using React Material UI Module with a functional component. We will also see how to customize the star rating in React using React Material UI pre-defined properties.
Ideally, a 5-star rating system authorizes respondents to rank their feedback on a 5-point scale from 1 to 5. The more the stars are chosen, the better the response is received.
How To Create Click And Hover Star Rating System In React Js Using Material UI
Step 1- Create A New Project
Before starting with further steps, we need to have Node, NPM set up on our computer. We will use the given command for doing so:
npx create-react-app react-blog-appNow, we navigate to the project directory:
cd react-blog-app
Step 2- Install React Module UI
In this step, we will run the below command in order to install React Material UI and other packages:
npm i @mui/material @emotion/react @emotion/stylednpm install @fontsource/robotoFurther, we add the modules after which, we have to import CSS associated with React MUI in the App.css file:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");@import "@fontsource/roboto/300.css";
@import "@fontsource/roboto/400.css";
@import "@fontsource/roboto/500.css";
@import "@fontsource/roboto/700.css";
Step 3- Make The Function Component
Here, we need to create components/ directory along with the StarRating.js file:
import React from 'react'
function StarRating() {
return (
<div>StarRating</div>
)
}
export default StarRating
Step 4- Build Simple Star Rating Component
For creating the Star Rating Component, we need to insert the whole code, even line by line in the components/StarRating.js file:
import * as React from "react";
import Box from "@mui/material/Box";
import Rating from "@mui/material/Rating";
export default function StarRating() {
const [value, setValue] = React.useState(2);
return (
<Box
sx={{
"& > legend": { mt: 2 },
}}
>
<Rating
name="simple-controlled"
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
/>
</Box>
);
}
Step 5- Read Only Star Rating
A read-only star feedback review system in React JS can be created by just passing the name=”read-only” and readOnly properties:
import * as React from "react";
import Box from "@mui/material/Box";
import Rating from "@mui/material/Rating";
import Typography from "@mui/material/Typography";
export default function StarRating() {
const [value, setValue] = React.useState(2);
return (
<Box
sx={{
"& > legend": { mt: 2 },
}}
>
<Typography component="legend">Read only</Typography>
<Rating name="read-only" value={value} readOnly />
</Box>
);
}
Step 6- Disable Star Rating
Here, in this step, we will come to know how to disable the star review component in React. We only need to set name=“disabled” and disabled props.
import * as React from "react";
import Box from "@mui/material/Box";
import Rating from "@mui/material/Rating";
import Typography from "@mui/material/Typography";
export default function StarRating() {
const [value, setValue] = React.useState(2);
return (
<Box
sx={{
"& > legend": { mt: 2 },
}}
>
<Typography component="legend">Disabled</Typography>
<Rating name="disabled" value={value} disabled />
</Box>
);
}
Step 7- Hover Star Rating Feedback
We will now show a label on hover to allow the user to choose the correct rating value.
We will be using the onChange and onChangeActive event handler props in the code example:
import * as React from "react";
import Rating from "@mui/material/Rating";
import Box from "@mui/material/Box";
import StarIcon from "@mui/icons-material/Star";
const labels = {
0.5: "Useless",
1: "Useless+",
1.5: "Poor",
2: "Poor+",
2.5: "Ok",
3: "Ok+",
3.5: "Good",
4: "Good+",
4.5: "Excellent",
5: "Excellent+",
};
function getLabelText(value) {
return `${value} Star${value !== 1 ? "s" : ""}, ${labels[value]}`;
}
export default function StarRating() {
const [value, setValue] = React.useState(2);
const [hover, setHover] = React.useState(-1);
return (
<Box
sx={{
width: 200,
display: "flex",
alignItems: "center",
}}
>
<Rating
name="hover-feedback"
value={value}
precision={0.5}
getLabelText={getLabelText}
onChange={(event, newValue) => {
setValue(newValue);
}}
onChangeActive={(event, newHover) => {
setHover(newHover);
}}
emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
/>
{value !== null && (
<Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
)}
</Box>
);
}
Step 8- Customize Star Rating
Based on our requirements and preferred scenario, we can change the star rating size using the size prop:
import * as React from 'react';
import Rating from '@mui/material/Rating';
import Stack from '@mui/material/Stack';
export default function StarRating() {
return (
<Stack spacing={1}>
<Rating name="size-small" defaultValue={3} size="small" />
<Rating name="size-medium" defaultValue={2} />
<Rating name="size-large" defaultValue={3} size="large" />
</Stack>
);
}We can change the star icon to any icon and even increase or decrease the number of stars:
import * as React from "react";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Rating from "@mui/material/Rating";
import FavoriteIcon from "@mui/icons-material/Favorite";
import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import Typography from "@mui/material/Typography";
const StyledRating = styled(Rating)({
"& .MuiRating-iconFilled": {
color: "#ff6d75",
},
"& .MuiRating-iconHover": {
color: "#ff3d47",
},
});
export default function StarRating() {
return (
<Box
sx={{
"& > legend": { mt: 2 },
}}
>
<Typography component="legend">Custom icon and color</Typography>
<StyledRating
name="customized-color"
defaultValue={2}
getLabelText={(value) => `${value} Heart${value !== 1 ? "s" : ""}`}
precision={0.5}
icon={<FavoriteIcon fontSize="inherit" />}
emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
/>
<Typography component="legend">10 stars</Typography>
<Rating name="customized-10" defaultValue={2} max={10} />
</Box>
);
}
Step 9- Update Main Component
The star components, which we made earlier need to be injected into the app. We can do it by importing it inside the main App.js file:
import React from "react";
import StarRating from "./components/StarRating";
function App() {
return (
<div>
<h2>React Material UI Star Rating Example</h2>
<StarRating />
</div>
);
}
export default App;
Step 10- Test The App On The Browser
After reaching the final step, we will run the app on the browser by using the given command:
npm start
Conclusion
In this React Js tutorial, we have learned how to build a simple star rating survey component using React MUI. We have also seen how to customize the star rating review system using custom material UI properties.
Thanks