react-custom-ratings

react-custom-ratings
react-custom-ratings is a react rating component which supports custom icons and styles and also provides progress bar which shows detailed information on ratings.

Installation

npm install react-custom-ratings

Demo

https://codesandbox.io/s/interesting-knuth-rjg53s?file=/src/App.js

Usage

import {Ratings, Rating, ProgressBar} from 'react-custom-ratings'

const Demo=()=>{
  return(
    <!--  Use Ratings component to display both ratings and progress bar -->
   <Ratings data={[{count:10,rating:5},{count:13,rating:4},{count:10,rating:3},{count:8,rating:2},{count:4,rating:1}]}/>
    <!--    Use Rating component to display ratings   -->
   <Rating  data={[{count:10,rating:5},{count:13,rating:4},{count:10,rating:3},{count:8,rating:2},{count:4,rating:1}]}/>
    <!--   Use ProgresBar component to display ProgressBar    -->
   <ProgressBar  data={[{count:10,rating:5},{count:13,rating:4},{count:10,rating:3},{count:8,rating:2},{count:4,rating:1}]}/>
  )};

API

This a list of props that you can pass down to the Ratings component:

Property	Description	Default Value	Type
data	Data for Ratings	NA	array
options	Props applied to the Rating and ProgressBar elements.	{ratings:{},progressBar:{}}	object

List of props that you can pass down to the Rating Component:

Property	Description	Default Value	Type
show	If it is true the rating component is visible	true	boolean
filledColor	Filled rating icon color	'#ffa41c'	string
unfilledColor	Empty rating icon color	'#ffa41c'	string
ratingIconClassname	Classname for rating Icon	'star'	string
className	classname for rating header text	'rating'	string
FilledRatingIcon	Custom react element for filled rating icon	from react-icons	React element
UnfilledRatingIcon	Custom react element for unfilled rating icon	from react-icons	React element
headerText	headerText is function which takes 'percent' type of number as parameter and returns react element	NA	(percent: number) => React.ReactElement;

List of props that you can pass down to the ProgressBar Component:

Property	Description	Default Value	Type
filledColor	Filled start rating color	'#ffa41c'	string
unfilledColor	Empty star rating color	'#ffa41c'	string
className	classname for rating header text	'rating'	string
progressBarText	To display custom text on left side of progress bar use progressBarText function.progressBarText takes function with parameter 'data' which should return react element	(data) => React.ReactElement;	React Element
percentage	To display custom percentage of ratings on rigt side of progress bar use percentage function.perecentage takes fucntion with two parameters 'data and 'percent' which should return react element	(percent: number, data) => React.ReactElement;	React Element
onClick	onClick is event handler function which gets executed when clicked on any of the progress bar,first parameter for onClick function is data of the progress bar clicked on.	(data) => void;	Function

Help improve the component
Build on your machine: Clone the repo git clone https://github.com/Roxiler/react-ratings.git

Install dependancies
npm install