A simple, highly customisable SVG star rating component for React

Demo

code sandbox

Features:

• SVG
• Customisable star shape.
• Customisable rating increments.
• Customisable colors.
• Customisable number of stars.
• Create read-only stars.

Usage

Via NPM

Install via npm:

npm install react-svg-star-rating

Then require in your project:

import StarRating from 'react-svg-star-rating'

You can then use the following markup in your project:

<StarRating />

Props

| Prop | Type | Description | Default | | ------------- |------------- | ------------- |-------------| | unit? | 'full' | 'half' | 'float' | The unit of star | 'full' | size? | number | The size of each star | 30 | count? | number | The number of star| 5 | | innerRadius? | number | The inner radius of star, this is used to customize star shape. (max: 50) | 25 | | outerRadius? | number | The outer radius of star, this is used to customize star shape. (max: 50) | 50 | | activeColor? | string | The color of the active portion of star. | '#ffd055' | | hoverColor? | string | The color of the hover potion of star. | '#ffebb7' | | emptyColor? | string | The color of empty star | '' | | roundedCorner? | boolean | Whether or not to round the star's corner | true | | handleOnClick? | (rating: number) => {} | Returns the rating value. | undefined | | isReadOnly? | boolean | When set to true, the rating cannot to be edited. | false | | initialRating? | number | The initial rating value. | 0 | | containerClassName? | string | A css class name to style star container. | '' | | starClassName? | string | A css class name to style each star. | '' |

version

v1

License

Copyright 2019 PRNDcompany

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.