Home Docs

Star Rating Component

Use this component to add a star rating to your project.


        <star-rating rating="3"></star-rating>

You can set the number of stars given, and the number of stars that the rating is out of.


        <star-rating rating="7" outof="10"></star-rating>

You can also choose the emoji used to display the rating.


        <star-rating rating="5" emoji="🤠"></star-rating>

Note that if you choose your own emoji instead of using the default stars, you cannot choose a number that the rating is out of.

You can use any Unicode character as your rating emoji.


        <star-rating rating="3" emoji="🍤"></star-rating>

You can browse the list of Unicode characters at this website.

You can also update the attributes of your star rating component using JavaScript.

<star-rating id="ratingToChange" rating="2" outof="5"></star-rating>
<script>
    let ratingToChange = document.getElementById("ratingToChange");
    ratingToChange.setAttribute("rating", 4);
</script>