igorwessel / react-dynamic-star

Single component to generate dynamic star svg

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