Several quick start options are available:
- Download the latest release.
- Clone the repo:
git clone https://github.com/adamjhf/hyperstars.git.
See examples in action.
A customisable star rating behavior built in hyperscript, which is fast and touch-friendly, supporting any number of stars or any step size. Current version uses text only, with no images.
Triggers a rated event in the DOM, so can be used with HTMX, hyperscript or other client-side libraries for handling rating events.
Import hyperstars.css before loading hyperscript:
<link href="hyperstars.css" rel="stylesheet" type="text/css">
<script src="hyperstars._hs" type="text/hyperscript"></script>
<script src="https://unpkg.com/[email protected]"></script>
For default 5-star rating, simply use by installing Hyperstars behavior on an span or div:
<span _="install Hyperstars()"></span>
Custom settings using a range input:
<span _="install Hyperstars(resettable: true)">
<input type="range" min="0" max="10" step="0.5" value="5">
</span>
Hyperstars allows you to have a dynamic star rating component without JavaScript or importing libraries like jQuery. It is simple and fast, based on the same methodology as rateit.js.
- Inspired by https://github.com/gjunge/rateit.js