https://github.com/heithemmoumni/svelte-stars-rating

A highly dynamic svelte stars rating component
https://github.com/heithemmoumni/svelte-stars-rating

javascript rating-stars svelte-stars-rating sveltejs

Last synced: 7 months ago
JSON representation

A highly dynamic svelte stars rating component

• Host: GitHub
• URL: https://github.com/heithemmoumni/svelte-stars-rating
• Owner: heithemmoumni
• License: mit
• Created: 2019-11-20T19:56:00.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-04-29T21:33:30.000Z (over 4 years ago)
• Last Synced: 2025-04-19T07:42:08.061Z (7 months ago)
• Topics: javascript, rating-stars, svelte-stars-rating, sveltejs
• Language: HTML
• Homepage: https://codesandbox.io/s/lively-https-ym9tj
• Size: 32.2 KB
• Stars: 15
• Watchers: 1
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# svelte-stars-rating

## A Highly Customizable, easy-to-use elegant stars rating component

![MIT License](https://badgen.net/badge/license/MIT/blue "MIT License")

[![view on npm](http://img.shields.io/npm/v/svelte-stars-rating.svg?colorB=red)](https://www.npmjs.com/package/svelte-stars-rating)

 [![Svelte v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)

###### Demo

![4.6 Star Rating](https://raw.githubusercontent.com/heithemmoumni/svelte-stars-rating/master/rating.png "3.6 Rating Stars")

[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lively-https-ym9tj)

# Usage

Install via NPM ```npm i svelte-stars-rating```

Then require in your project:

```js

var StarRating = require('svelte-stars-rating');

```

or ES6 syntax:

```js

import StarRating from 'svelte-stars-rating'

```

You can then use the following selector anywhere in your project:

* To get up and running quick the package now supports rendering just the selector with default values

```html

```

## Basics

| Property | Type  | Description | Default

| --- | ---  | --- | --- |

| **rating** | Number  | A number between 0.0-5.0 that will determine the fullness of the 5-stars rating polygons | 1 |

| **isIndicatorActive** | Boolean | A property that deteremines weather a rating indicator would show to the right | true |

## Customized Styling

| Property | Type  | Description | Default |

| --- | ---  | --- | --- |

| **fullStarColor** | string | Set the full or partially-full star color | ```#ffd219``` |

| **emptyStarColor** | string | Set the empty or partially-empty star color | ```#737373``` |

| **styleStarWidth** | number | Set the star width | 20 |

## Implementation Example

Define your **config** options object in the component importing StarRating e.g

```js

const app = new App({

  target: document.body,

  props: {

    name: "svelte-stars-rating",

    rating: 4.7,

    isIndicatorActive: false,

    style: {

      styleStarWidth: 85,

      styleEmptyStarColor: "#737373",

      styleFullStarColor: "#ffd219"

    }

  }

})

```

or

```js

let style = {

   styleStarWidth: 85,

   styleEmptyStarColor: "#737373",

   styleFullStarColor: "#ffd219"

}

```

```html

```

Feedback would be much appreciated, questions, suggestions, issues are more than welcome.

---

If you like to support my open-source contributions and feeling generous, feel free to: