@annoyingmouse/wc-star-review v1.0.2
This web component creates a configurable way of displaying a rating.
Demo here: https://wc-star-review.annoyingmouse.repl.co
Installation
<script type="module"
src="https://unpkg.com/@annoyingmouse/wc-star-review/wc-star-review.js"></script>
Alternatively:
<script type="module"
src="https://cdn.skypack.dev/@annoyingmouse/wc-star-review/wc-star-review.js"></script>
You can use it minified by adding using this instead:
<script type="module"
src="[WHATEVER CDN]/@annoyingmouse/wc-star-review/dist/wc-star-review.min.js"></script>
Please remember to change [WHATEVER CDN]
to your favourite CDN
Usage
<wc-star-review rating="1"
reviews="1"></wc-star-review>
<wc-star-review rating="2"
reviews="2"></wc-star-review>
<wc-star-review rating="3"
reviews="3"></wc-star-review>
<wc-star-review rating="4"
reviews="4"></wc-star-review>
<wc-star-review rating="5"
reviews="5"></wc-star-review>
<script type="module"
src="wc-star-review.js"></script>
Configuration
The rating is provided using the rating
attribute, it defaults to 0
.
The number of stars visible is controlled by the total
attribute, it defaults to 5
(see the Caution below).
The number of reviews, if known, can be shown in brackets by providing a reviews
attribute. You don't need to display this, but if you do the number will be shown in the title of the component.
The colour of the stars can be changed from the default of #FFC107
by adding a colour
attribute with a suitable CSS value.
The background behind the stars can be changed from the default of #CCCCCC
by adding a background
attribute with a suitable CSS value.
Caution
Increasing the total
to numbers above 5 is not advised, besides, 5 stars are commonly used in eCommerce