JSPM

@annoyingmouse/wc-star-review

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q30196F
  • License MIT

Package Exports

  • @annoyingmouse/wc-star-review
  • @annoyingmouse/wc-star-review/main.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@annoyingmouse/wc-star-review) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

This web component creates a configurable way of displaying a rating.

Published on webcomponents.org

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