How to use precision prop in the Rating component in Material UI?

Sometimes there are instances where we find ourselves needing to rate products, services, or other things. On occasion, we often rely on a feature called "rating " commonly presented in the form of star ratings ranging from 1 to 5. However, what if we want to provide ratings using half or full increments? This is where the "precision" property in Material UI comes into play.

By utilizing the precision prop, we can establish the minimum increment value for permitted changes. The rating component can then display numbers with the help of the value property. In this article, we will explore how to incorporate and utilize the precision property within Material UI's rating component.

Types of Precision in Material UI

In material UI, there are mainly two types of precision available. They are −

• Half precision − It is referred to as the minimum increment value change allowed, and here the precision of 0.5 is used.

• Full precision − It is also referred to as the minimum increment value change allowed, and here the precision of 1 is used, which is the default value in MUI.

Steps to Use Precision Prop in Rating

Below, we have outlined the complete steps to use precision prop for the rating component −

Step 1: Create a New React App and Install MUI

First, let's start by creating a React app and installing Material UI. Follow these steps −

Open your terminal and run the command −

npx create react app projectname

After the project is created, navigate to the project directory by running −

cd projectname

Install Material UI and its dependencies by running −

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

Step 2: Import the required components into React

Open the App component and import the required components into it.

import { Rating } from '@mui/material

Step 3: Use Precision Prop

To use the precision prop, its syntax is given below:

<Rating
   precision={0.5}
   name="rating"
   getLabelText={getRatings}
   onChange={(event, newValue) => {
      setVal(newValue);
   }}
   onChangeActive={(event, newHover) => {
      setHover(newHover);
   }}
/>

Rating API

• <Rating> − This API is used to allow the user to submit a rating of their own in Material UI.

Props

• classes − This prop is used to override or add styles to an element.

• disabled − This prop is used to disable rating.

• emptyIcon − This prop displays an icon when empty

• emptyLabelText − This prop is used read the label when empty.

• getLabelText − This prop is used to get the current rating value.

• highlightSelectedOnly − This prop is used to highlight selected icon

• icon − This prop is used to show icons.

• IconContainerComponent − This prop contains icons.

• max − This prop is used to give a max rating.

• name − This prop is used to add a rating name.

• onChange − This prop is used to trigger a callback function when an input is changed.

• onChangeActive − This defines the change in the rating state on hover.

• precision − This prop is used to add rating precision.

• size − This prop is used to change the size.

• sx − This prop is used to add custom styles to the material UI components.

• value − This prop is used to give a value to the component.

Example

In this example, we have used the precision prop to give the half rating. When the user hovers over the star rating, the rating can be chosen in half by the user to have more control while providing feedback.

import { Box, Rating, Typography } from "@mui/material";
import React from "react";
import StarIcon from "@mui/icons-material/Star";
import { useState } from "react";

const ratingLabels = {
   0.5: "Useless",
   1: "Very Useless",
   1.5: "Poor",
   2: "Very Poor",
   2.5: "Ok",
   3: "Very Ok",
   3.5: "Good",
   4: "Very Good",
   4.5: "Excellent",
   5: "Very Excellent",
};

const App = () => {
   const [hover, setHover] = useState(-1);

   return (
      <div>
         <Box sx={{ p: 10 }}>
            <Rating
               precision={0.5}
               value={hover !== -1 ? hover : 3}
               name="hover-ratings"
               onChangeActive={(event, newHover) => {
                  setHover(newHover);
               }}
               sx={{ fontSize: 40 }}
               emptyIcon={<StarIcon style={{ opacity: 0.4 }} fontSize="inherit" />}
            />
            {hover !== -1 && (
               <Box>
                  <Typography sx={{ fontSize: 20 }}>{ratingLabels[hover]}</Typography>
               </Box>
            )}
         </Box>
      </div>
   );
};

export default App;

Output

Example

In this example, we have used the precision prop to give the full rating. When the user hovers over the star rating, the rating can be selected from 1 to 5 only, not in half as done in the above example.

import { Box, Rating, Typography } from "@mui/material";
import React from "react";
import StarIcon from "@mui/icons-material/Star";
import { useState } from "react";

const ratingLabels = {
   0.5: "Useless",
   1: "Very Useless",
   1.5: "Poor",
   2: "Very Poor",
   2.5: "Ok",
   3: "Very Ok",
   3.5: "Good",
   4: "Very Good",
   4.5: "Excellent",
   5: "Very Excellent",
};

const App = () => {
   const [hover, setHover] = useState(-1);

   return (
      <div>
         <Box sx={{ p: 10 }}>
            <Rating
               precision={1}
               value={hover !== -1 ? hover : 3}
               name="hover-ratings"
               onChangeActive={(event, newHover) => {
                  setHover(newHover);
               }}
               sx={{ fontSize: 40 }}
               emptyIcon={<StarIcon style={{ opacity: 0.4 }} fontSize="inherit" />}
            />
            {hover !== -1 && (
               <Box>
                  <Typography sx={{ fontSize: 20 }}>{ratingLabels[hover]}</Typography>
               </Box>
            )}
         </Box>
      </div>
   );
};

export default App;

Output

Example

In this example, we have customized the rating component by adding styles to the rating component using a 'styled' component. Then we had used it as a customized rating component. To display the rating, we've used the precision prop with a precision of 1. When users hover over the star rating, they can easily provide their ratings.

import { Box, Rating, Typography } from "@mui/material";
import React from "react";
import StarIcon from "@mui/icons-material/Star";
import { useState } from "react";
import {styled} from '@mui/material/styles'

const ratingLabels = {
   0.5: "Useless",
   1: "Very Useless",
   1.5: "Poor",
   2: "Very Poor",
   2.5: "Ok",
   3: "Very Ok",
   3.5: "Good",
   4: "Very Good",
   4.5: "Excellent",
   5: "Very Excellent",
};

const CustomRating = styled(Rating)({
   '& .MuiRating-iconFilled': {
      color: 'green',
   }
})

const App = () => {
   const [hover, setHover] = useState(-1);

   return (
      <div>
         <Box sx={{ p: 10 }}>
            <CustomRating
               precision={1}
               value={hover !== -1 ? hover : 3}
               name="hover-ratings"
               onChangeActive={(event, newHover) => {
               setHover(newHover);
               }}
               sx={{ fontSize: 40 }}
               emptyIcon={<StarIcon style={{ opacity: 0.4 }} fontSize="inherit" />}
            />
            {hover !== -1 && (
               <Box>
                  <Typography sx={{ fontSize: 20, color: 'green', fontStyle: 'italic' }}>{ratingLabels[hover]}</Typography>
               </Box>
            )}
         </Box>
      </div>
   );
};

export default App;

Output

Conclusion

To sum up in this article we have explored how to utilize the precision prop in the Material UI rating component. We have covered all the steps to effectively implement this prop along with its syntax and provided examples. By incorporating this prop users gain control when giving ratings or feedback thus enhancing their experience, with valuable information.