I am currently working on developing a React component that showcases a rating percentage using a star icon with two different shades.
For example, if the input rating is 79%, I want to display a star with 79% of it in gold color and the remaining 21% in grey.
At this point, I have managed to place two separate stars from the Font Awesome library in the same location (one in gold and one in grey).
You can find my code in this sandbox and below:
import React from 'react';
import { FaStar } from "react-icons/fa";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
starFill: {
cursor: 'pointer',
transition: 'color 200ms',
position: 'absolute',
top: '25%',
left: '50%',
transform: 'translate(-50%, -75%)',
zIndex: 1
},
starContainer: {
cursor: 'pointer',
transition: 'color 200ms',
position: 'absolute',
top: '25%',
left: '50%',
transform: 'translate(-50%, -75%)',
zIndex: 2
}
}));
const StarRating = (percentRating) => {
const classes = useStyles();
console.log(percentRating);
return (
<React.Fragment>
<div className={classes.starFill}>
<FaStar color='#ffc107' size={200} />
</div>
<div className={classes.starContainer}>
<FaStar color='#e4e5e9' size={200} />
</div>
</React.Fragment>
)
}
export default StarRating;