react-custom-ratings v0.1.76

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:

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