This is a simple star-rating web-component built with lit. It has a "value" attribute to set the initial value declarative.
- small
- lightweight
- framework agnostic (like any other true web component)
- integrates for example with vanilla, vue, react, angular, svelte, solid.js and many more
<thy-star-rating></thy-star-rating>
<thy-star-rating readonly></thy-star-rating> //readonly
<thy-star-rating disabled></thy-star-rating> //disabled
<thy-star-rating value="2"></thy-star-rating> // sets the initial Rating to 2 stars
It also fires a custom event "changed" when the rating is changed, that you can listen to like so:
const els = document.querySelectorAll('thy-star-rating');
els.forEach((el, idx) => {
el.addEventListener('changed', (e) => {
console.log(`Component ${idx + 1}: Rating changed from ${e.detail.oldValue} 🡒 ${e.detail.value}`);
});
});npm install thy-star-rating
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My fancy app</title>
<script type="module">import 'thy-star-rating';</script>
</head>
<body>
<thy-star-rating></thy-star-rating>
</body>
</html>| name | type | default-value |
|---|---|---|
| value | number (0-5) | 0 |
| readonly | boolean | false |
| disabled | boolean | false |
Overwrite colors with this css vars:
| default | hover | clicked | disabled |
|---|---|---|---|
--star-default-color |
--star-halo-color |
--star-rated-color |
--star-disabled-color |