Starscore

A star-score library for web app.

• Release Notes.

Features

• Create star-score component via SVG.
• Support for custom icons.
• Not relying on any third-party libraries.
• Support typescript.

Installation

# pnpm
$ pnpm add starscore

# yarn
$ yarn add starscore

# npm
$ npm i starscore

Usage

1. Imports style.

import 'starscore/lib/style.css'

2. Create a star-score instance.

<div id="starscore-container"></div>

import { createStarscore } from 'starscore'

const starscoreInstance = createStarscore({
  container: '#starscore-container'
})

Options

| Prop | Type | Default Value | Description | | :---: | :---: | :---: | :---: | | container | string,HTMLElement | '' | Specify the container of star-score. | | initialValue | number | 0 | Set a initialization score. | | size | number, string | 20px | Icon size. | | gutter | string, number | 4px | Icon gutter. | | color | string | #ee0a24 | Selected color. | | voidColor | string | #c8c9cc | Void color. | | disabledColor | string | #c8c9cc | Disabled color. | | type | string | 'star' | Specify this to use a built-in icon. You can use star or heart. | | icon | string | - | Specify this to change SVG string of the selected icon. | | voidIcon | string | - | Specify this to change SVG string of the void icon. | | clearable | boolean | false | Whether to allow clear when click again. | | readonly | boolean | false | Whether to be readonly. | | disabled | boolean | false | Whether to disable score. | | allowHalf | boolean | false | Whether to allow half star. | | showDescription | boolean | false | Whether to show current score description. | | descriptionColor | string | #909399 | Specify this to change the color of current score description. | | descriptionFontSize | string, number | 13px | Specify this to change the font-size of current score description. | | scoreDetails | Function | () => '' | Specify this to custom the desctiption content of current score. currentScore: number is the only parameter. | | onChange | Function | - | Event triggered when the current score changes. (currentScore: number) => void |

APIs

Methods of instance

setValue

You can use it to change the score value after After instantiation.

starscoreInstance.setValue(5) // set 5 score

getValue

You can use this to obtain the current score value.

starscoreInstance.getValue()

setOptions

You can use it to change the options after After instantiation.

starscoreInstance.setOptions({
  disabled: true // disable the star-score
}, true)

The second parameter specifies whether to re-render, defaults is false.

destory

Destory the star-score instance.

starscoreInstance.destory()