Overview Official Website

Rater js is the best star rater for the browser. No dependencies. Unlimited number of stars.

Add Package
npm i @ernane/svelte-star-rating --save
Import Package
import StarRating from '@ernane/svelte-star-rating';
Remove Package
npm remove @ernane/svelte-star-rating or you can remove package by removing specific package from package.json
Examples:
Title Javascript
Basic Rating 
const config = {
readOnly: false,
countStars: 5,
range: {
    min: 0,
    max: 5,
    step: 1
},
score: 0,
showScore: true,
scoreFormat: function () {
    return '';
},
name: '',
starConfig: {
    size: 20,
    fillColor: '#556ee6',
    strokeColor: '#BB8511',
    unfilledColor: '#FFF',
    strokeUnfilledColor: '#000'
}
}; 

<StarRating {config} />
Half rating 
const halfRate = {
readOnly: false,
countStars: 5,
range: {
    min: 0,
    max: 5,
    step: 0.5
},
score: 2.5,
showScore: true,
scoreFormat: function () {
    return `(${this.score}/${this.countStars})`;
},
name: '',
starConfig: {
    size: 24,
    fillColor: '#556ee6',
    strokeColor: '#BB8511',
    unfilledColor: '#FFF',
    strokeUnfilledColor: '#000'
}
};

<StarRating config={halfRate}/>
Disabled rating 
const readOnlyRate = {
    readOnly: true,
    countStars: 5,
    range: {
        min: 0,
        max: 5,
        step: 0.5
    },
    score: 2.5,
    showScore: true,
    scoreFormat: function () {
        return ``;
    },
    name: '',
    starConfig: {
        size: 24,
        fillColor: '#556ee6',
        strokeColor: '#BB8511',
        unfilledColor: '#FFF',
        strokeUnfilledColor: '#000'
    }
};

<StarRating config={readOnlyRate}/>
Set start and stop rate [2..10] with step 2 
const startStopRatewithtwoStep = {
    readOnly: false,
    countStars: 5,
    range: {
        min: 0,
        max: 10,
        step: 1
    },
    score: 0,
    showScore: true,
    scoreFormat: function () {
        return `(${this.score * 2})`;
    },
    name: '',
    starConfig: {
        size: 24,
        fillColor: '#556ee6',
        strokeColor: '#BB8511',
        unfilledColor: '#FFF',
        strokeUnfilledColor: '#000'
    }
};
<StarRating config={startStopRatewithtwoStep}/>
Custom CSS icons 
const customcssrate = {
    readOnly: false,
    countStars: 5,
    range: {
        min: 0,
        max: 5,
        step: 1
    },
    score: 0,
    showScore: true,
    scoreFormat: function () {
        return ``;
    },
    name: '',
    starConfig: {
        size: 24,
        fillColor: '#000',
        strokeColor: '#BB8511',
        unfilledColor: '#FFF',
        strokeUnfilledColor: '#000'
    }
};

<StarRating config={customcssrate}/>
© Skote.