5 Gold stars!
As a part of my final project for Flatiron School, I wanted to implement a star rating system. Since I would be adding reviews to each Lodge option, I thought stars would also be a good way to display a users feedback and learn how to do something new in the process.
To begin this feature, I made an independent component, StarRating, and imported it into wherever I want the star rating system to exist on the site, above is in the NewReview component.
Next, I browsed and found some star icons to use for the stars on Font Awesome, and imported them into my StarRating component.
Since we now have access to the stars, we need to make 5 of them, we can do this by creating an array with 5 items, map over them, and display the star icon for each element in the array, and we should now have 5 stars displayed.
Since each star is essentially a radio button, but we want to hide the radio button graphic and instead just have the 5 stars displayed. In order to hide the radio button graphic, just select it and add display:none; in the css file.
Next, on initial load, the stars will be grey, since we have not decided on the rating yet, but once one is selected, all stars up to, and including that star will be lit up but using an onChange event. The final step will be to import the useState hook to establish the default rating (null), or import the state and setState function from another component) and save the rating whenever changed (or clicked) via an onChange event, and setting state to the new state value.
Here is the finished product of my Star Rating component, and the finished StarRating component in action!
Optional (Hover feature)
One feature that I tried, but did not decide to include in the final product was a hover feature on the stars that they would turn bright when hovered over. If you would like to include this extra feature you only need to add a few lines of code to get it working:
1. const [hover, setHover] = useState(null) just below your existing state, or just below the component Name
2. Add
onMouseEnter={() => setHover(ratingValue)} &
onMouseLeave={() => setHover(null)}
into the FaStar (since our Radio buttons are hidden thats the only option here) in order to change the star value when the mouse enters or exits a star
3. Since we want to the hover effect to override the existing value, we set the hover value of a higher importance than the starRating below
Thanks for reading! You’ve earned a Gold star yourself!
code: https://github.com/troymeeker/old-north-acres
references: https://www.youtube.com/watch?v=rg7Fvvl3taU