Svelte Rate It

Rate component for Svelte. Based on vue-rate. Thanks @SinanMtl

Demo

Installation and usage

Install rate component for your project

npm install svelte-rate-it --save

or with yarn

yarn add svelte-rate-it

Import Svelte Rate into your app

import Rate from "svelte-rate-it/Rate.svelte";
 

Use HTML template

<Rate length={5} />

Options from props

• length {number}: Star size

<Rate length={5} />

• value {number}: Default value

<Rate length={5} value={2} />

• showCount {boolean}: Shows rate number when mouseover the star.

<Rate length={5} showCount={true} />

• ratedesc {object}: Rate star description array.

<Rate
  length={5}
  ratedesc={['Very bad', 'bad', 'Normal', 'Good', 'Very good']} />
 

• disabled {boolean}: Disable rate.

<Rate length={5} value={2} disabled={true} />

• readonly {boolean}: Read-only rate.

<rate length={5} value={2} readonly={true} />

Events

const beforeRate = rate => {
    console.log(rate);
  };
  const afterRate = rate => {
    console.log(rate);
  };
})

<Rate
  {beforeRate}
  {afterRate}
  length={5}
  ratedesc={['Very bad', 'bad', 'Normal', 'Good', 'Very good']}
  showCount={true} />