✨ Svelte Star Rating ✨

💻 Project

Simple Svelte component, with no dependencies, for implementing and capturing assessments through a simple and intuitive interface that will take you to the stars.

See this demo!!

📦 Installation

$ npm install @ernane/svelte-star-rating # => or yarn

⚠️ if using SvelteKit or Sapper, it is advised to install as a development dependency:

$ npm install @ernane/svelte-star-rating --save-dev # => or yarn

📁 Features

This package will add a svelte component that may or may not receive a configuration object with the following attributes shown below.

• ⚙️ General Settings

In addition, we have two other nested attributes that specify distinct settings.

• 📏 Range

• ⭐ Setting of the Stars:

In the end, the configuration object will be similar to the one shown below.

const config = {
  readOnly: false,
  countStars: 5,
  range: {
    min: 0, 
    max: 5, 
    step: 0.001
  },
  score: 0.0,
  showScore: true,
  scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
  name: "",
  starConfig: {
    size: 30,
    fillColor: '#F9ED4F',
    strokeColor: "#BB8511",
    unfilledColor: '#FFF',
    strokeUnfilledColor: '#000'
  }
}

• 🎯 Events

In addition, it is also possible to observe events of the component itself that will be executed in an internal element from a defined action. Below are the available events.

💡 Use

• Import the component

  import StarRating from "@ernane/svelte-star-rating";
  

• Create the configuration object

  const config = { ... }
  

  **As shown in the previous section

• Finally, use it! 🎉

  <StarRating {config}/>
  

If you would like to implement or improve any feature feel free to submit a pull request. I would love to receive!