React Dynamic Star

A Highly Customizable, easy-to-use elegant stars rating component. This component is a port of an open-source component made in vue, you can access the repo in Vue Star Rating.

Demo

Usage

1. Install via npm or yarn

yarn add react-dynamic-star

npm install react-dynamic-star

2. Import in project

import { DynamicStar } from 'react-dynamic-star';

3. Use

const App = () => { 

    return (
        <div>
            <DynamicStar rating={5} />
        </div>
    )
}

Props

| Property | Type | Description | Default | --- | --- | --- | --- | | rating* | Number | A number between 0.0-totalStars that will determine the fullness of the stars rating polygons | outlined? | Boolean, String | Use only outlined, the stroke color will use the fullStarColor, pass the color for he the outlined color will use. | outlineWidth? | Number | The width for outline | sharpnessStar? | Number| Define the sharpness/fatness of a star | 2.5 | totalStars? | Number | Define total of stars | 5 | width? | Number | Define width of a star | 100 | height? | Number | Define height of a star |100 | emptyStarColor? | String | Define empty color when star is not filled | transparent | fullStarColor? | String | Define full star color when star is filled | #FFBC00