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

!alt text

Usage

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

const Demo=()=>{
return(






)};

``

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