react-score ✨✨✨✨✨

A react score component for rating

Get started quickly

Install react-stars package with NPM:

npm install react-score --save

Then in your project include the component:

import React from 'react'
import ReactScore from 'react-score'

const Score = () => {
  return (
    <ReactScore
      color2='red'
      spacing={15}
      char='H',
      onChange={score => {
        console.log(score)
      }}
    />
  )
}

API

props list:

| Property | Description | Default value | type | | -------- | ----------- | ------------- | ---- | | className | Name of parent class | null | string | | count | How many total stars you want | 5 | number | | value | Default value prop | 0 | number | | char | Use your own character, including svg | ★ | string | | color1 | Color of inactive character | rgba(253, 84, 9, 0.2) | string | | color2 | Color of selected or active star | rgb(253, 84, 9) | string | | size | Size of stars (in px) | 30 | string | | spacing | Letter spacing of stars (in px) | 10 | string | | edit | Should you be able to select rating or just see rating (for reusability) | true | boolean | | half | Should component use half stars, if not the decimal part will be dropped otherwise normal algebra rools will apply to round to half stars | true | boolean | onChange | Will be invoked any time the rating is changed | function() {} | function |

Help improve the component

Build on your machine:

# Clone the repo
https://github.com/cappuccino6/react-score.git
# Go into project folder
cd react-score
# Install dependancies
npm i

Build the component:

npm run build

Run the examples (dev):

npm run dev

Then in your browser go to: http://127.0.0.1:8080/example