# svelte-star-rating

> A simple svelte component that shows a rating from 0 to 5 with svg stars when passed a number.

Latest version **2.0.1** (published 2022-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-star-rating
pnpm add svelte-star-rating
yarn add svelte-star-rating
bun add svelte-star-rating
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2022-09-09 |
| First published | 2020-06-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Rubén Vara |
| Maintainers | rubenvara |
| Keywords | svelte, star rating, component, sapper |

## Links

- npm: https://www.npmjs.com/package/svelte-star-rating
- Repository: https://github.com/rubenvar/svelte-star-rating
- Homepage: https://github.com/rubenvar/svelte-star-rating#readme
- Issues: https://github.com/rubenvar/svelte-star-rating/issues
- npm.io page: https://npm.io/package/svelte-star-rating

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 2.0.1 (latest) — 2022-09-09
- 1.3.3-2 (next) — 2022-07-21
- 2.0.0 — 2022-07-21
- 1.3.3-1 — 2022-07-21
- 1.3.2 — 2022-03-22
- 1.3.0 — 2021-03-22
- 1.2.1 — 2020-11-29
- 1.2.0 — 2020-11-29
- 1.1.1 — 2020-06-19
- 1.1.0 — 2020-06-16
- 1.0.0 — 2020-06-11

## 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
<script>
  import StarRating from 'svelte-star-rating';
</script>

<StarRating rating={3.35} />
```

Output:

![Simple example of Svelte Star Rating](./docs/example-simple.jpg)

### Advanced

```svelte
<script>
  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;';
</script>

<StarRating {rating} {config} {style} />
```

Output:

![Advanced example of Svelte Star Rating](./docs/example-advanced.jpg)

---
_Source: https://npm.io/package/svelte-star-rating · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._