Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rubenvar/svelte-star-rating
A simple svelte component that shows a star rating from 0 to 5
https://github.com/rubenvar/svelte-star-rating
component no-dependencies props rating-number sapper star-rating svelte svelte-kit sveltejs sveltekit
Last synced: 4 months ago
JSON representation
A simple svelte component that shows a star rating from 0 to 5
- Host: GitHub
- URL: https://github.com/rubenvar/svelte-star-rating
- Owner: rubenvar
- License: mit
- Created: 2020-06-08T17:02:27.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-06T02:28:51.000Z (over 1 year ago)
- Last Synced: 2024-09-28T13:42:39.034Z (4 months ago)
- Topics: component, no-dependencies, props, rating-number, sapper, star-rating, svelte, svelte-kit, sveltejs, sveltekit
- Language: Svelte
- Homepage: https://www.npmjs.com/package/svelte-star-rating
- Size: 270 KB
- Stars: 7
- Watchers: 4
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Star Rating
## What is this
A simple [svelte](https://svelte.dev/) component that shows a rating from 0 to 5 with svg stars. Just need to pass a number. No dependencies required.
## Installation
As with any other node package in svelte:
```bash
npm install svelte-star-rating
```
But remember to install it as a **dev dependency** when using it with [SvelteKit](https://kit.svelte.dev/) (or [Sapper](https://sapper.svelte.dev/)):
```bash
npm install svelte-star-rating --save-dev
```
## Usage
The package exports a svelte component.
The component takes a number of props:
| Prop | Type | Default | Required | Description |
| ------ | ------ | ------- | -------- | ----------------------------------------------------- |
| rating | Number | - | Yes | The rating. Any number from 0 to 5.0 |
| config | Object | {} | No | Config options for the component. See below |
| style | String | - | No | CSS styles passed directly to the container component |
**About the config object**:
| Option | Type | Default | Description |
| ---------- | ------- | --------- | ----------------------------------------------- |
| emptyColor | String | '#7f7f7f' | The color for the empty parts of the stars |
| fullColor | String | '#ffcf00' | The color for the filling of the stars |
| showText | Boolean | false | Show the rating number next to the stars or not |
| size | Number | 20 | The size of the stars. Pass a number of pixels. |
**About the style prop**: It accepts a string of css styles, written as inline-css. It is passed directly, unchecked, to the main `div` as inline-css. Use it cautiously.
## Be aware
- Passing a rating higher than 5.0 or lower than 0.0 will throw an error.
- The component is reactive since v1.3.0 (if rating value changes, the component will change the displayed rating).
- Any css-valid color is accepted (hsl, hex, rgb, string, etc.).
- Stars are 1:1 proportionate (width equals height, so both equal the size property).
- If the rating number text is shown (`showText: true`), font size is half the star size or 16px, whatever is higher.
Also:
- The component doesn't handle in any way the number passed as rating: If you operate on the number, you may end up with a value of `3.02 + 0.01 = 3.0299999995`, for example, due to *the way JavaScript works*. It's up to you to manage this before passing the number.
## Example
Use it as follows:
### Simple
```svelte
import StarRating from 'svelte-star-rating';
```
Output:
### Advanced
```svelte
import StarRating from 'svelte-star-rating';
const rating = 3.35;
const config = {
emptyColor: 'hsl(240, 80%, 85%)',
fullColor: '#f05',
showText: true,
size: 42,
};
const style = 'border: 1px solid firebrick;padding: 12px;';
```
Output:
