React-score NPM

react-score ✨✨✨✨✨

A react score component for rating

react-score

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

react score rate reviews

babel-core babel-preset-env babel-preset-es2015 babel-preset-react babel-preset-stage-1 classnames css-loader prop-types react react-dom style-loader

@everything-registry/sub-chunk-2609 @infinitebrahmanuniverse/nolb-react-sc

4 years ago

4 years ago

4 years ago

4 years ago