React-rating-tooltip NPM

React-Rating-Tooltip

React-rating-tooltip is a simple to use yet completely customizable component for getting use Rating/Reviews.

Fully CSS customizable - Styles of Rating Counter, star-container, selected status and tooltip style
Custom position of rating counter and selected status around the Rating
Active(Selected) & Inactive(Unselected) components of the rating
Customize Tooltip, clear rating etc.

Installation

This requires React.js and Prop-Types to run.

npm i react-rating-tooltip

Demo

Sandbox link to Play with

How to Use

Install and import react-rating-tooltip and pass the props as per the below table

import React from 'react';
import Rating from 'react-rating-tooltip';
import 'font-awesome/css/font-awesome.min.css';

class SampleRating extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
          max: 4,
          defaultRating: 2,
          counterPosition: 'left',
          clearRating: true,
          textPosition: 'right',
          tooltipContent: ["Very Bad", "Bad", "Fair", "Good", "Very Good"],
          ratingValue: ["Very Bad", "Bad", "Fair", "Good", "Very Good"],
          starStyle: {
              height: '28px',
              backgroundColor: '#F2F2F2',
              paddingLeft: '2px',
              paddingRight: '2px',
              color: '#F58220',
              lineHeight: '28px',
              marginLeft: '5px',
              marginRight: '5px',
          },
          styleConfig: {
            counterStyle: {
              height: '28px',
              backgroundColor: '#F58220',
              paddingLeft: '12px',
              paddingRight: '12px',
              color: '#FFF',
              lineHeight: '28px',
            },
            starContainer: {
              fontSize: '24px',
              backgroundColor: '#F2F2F2',
              height: '28px',
            },
            statusStyle: {
              height: '28px',
              backgroundColor: '#F58220',
              paddingLeft: '12px',
              paddingRight: '12px',
              color: '#FFF',
              lineHeight: '28px',
              minWidth: '100px',
              fontSize: '18px',
              textAlign: 'center',
            },
            tooltipStyle: {
              fontSize: '14px',
              padding: '5px',
            }
          }
        }
      }

      handleChange = (RatingIndex, RatingValue) => {
        console.log(RatingIndex, RatingValue);
      }

    render() {
        return(
            <Rating
                max = {this.state.max}
                defaultRating = {this.state.defaultRating}
                counterPosition = {this.state.counterPosition}
                clearRating = {this.state.clearRating}
                textPosition = {this.state.textPosition}
                tooltipContent = {this.state.tooltipContent}
                ratingValue={this.state.ratingValue}
                styleConfig = {this.state.styleConfig}
                onChange={this.handleChange}
                ActiveComponent={<i className="fa fa-star" style={this.state.starStyle} />}
                InActiveComponent={<i className="fa fa-star-o" style={this.state.starStyle} />}
            />
        );
    }
}

export default SampleRating;

Prop-Types

Details of the Props to be passed:

Prop-name	Type	Description
max	Number	`Required`. This determines the maximum number of Stars or Rating in the Component.
defaultRating	Number	`Default value - 0`. This determines the current number of selected Stars or Rating in the Component.
counterPosition	String	`Possible Values - ['left', 'right']`. This determines the position of the Rating Count in the Component. If not passed, Count will not be displayed.
textPosition	String	`Possible Values - ['left', 'right']`. This determines the position of the Rating Value (Status) in the Component. If not passed, Select value will not be displayed.
clearRating	Boolean	`Default Value - true`. This determines whether the rating can be cleared/reset. If passed true, clicking again on the same rating count will clear the rating.
disabled	Boolean	`Default Value - false`. This determines whether the rating can be enabled/disabled. If passed true, the rating component will be disabled and act as Read only component
tooltipContent	Array	The Array of values as tooltip. Tooltips Values are matched to Rating count based on index. If not passed, tooltip will not be added
ratingValue	Array	The Array of values for Rating count. Rating Values are matched to Rating count based on index. If not passed, Values will not be set
onChange	Function	`Required`. A callback function which gets two arguements on every change of Rating - `Rating count, Rating Value (if passed)`
ActiveComponent	React/HTML Element	`Required`. The component or element to be considered as Selected rating
InActiveComponent	React/HTML Element	`Required`. The component or element to be considered as Left-out rating
styleConfig	Object	`See the below table for more details`. Its a Nested object with specific styles for specific parts of the Component

styleConfig Details

Details of the styleConfig:

Prop-name	Type	Description
counterStyle	Object	CSS styles to be applied to the Part of the component where the Rating count is displayed
starContainer	Object	CSS styles to be applied to the Part of the component container where the stars/Rating is displayed
statusStyle	Object	CSS styles to be applied to the Part of the component where the Rating value/status is displayed
tooltipStyle	Object	CSS styles to be applied to the tooltips of the component

Please check the example for styleConfig

Props:

Prop-Types:

{
      max: PropTypes.number.isRequired,
      defaultRating: PropTypes.number,
      counterPosition: PropTypes.oneOf(['left', 'right']),
      clearRating: PropTypes.bool,
      disabled: PropTypes.bool,
      textPosition: PropTypes.oneOf(['left', 'right']),
      tooltipContent: PropTypes.array,
      ratingValue: PropTypes.array,
      styleConfig: PropTypes.shape({
        counterStyle: PropTypes.object,
        starContainer: PropTypes.object,
        statusStyle: PropTypes.object,
        tooltipStyle: PropTypes.object,
      }),
      onChange: PropTypes.func.isRequired,
      ActiveComponent: PropTypes.oneOfType([
        PropTypes.node,
        PropTypes.element
      ]).isRequired,
      InActiveComponent: PropTypes.oneOfType([
        PropTypes.node,
        PropTypes.element
      ]).isRequired,
}

Default-Props

{
      clearRating: true,
      disabled: false,
      defaultRating: 0,
      styleConfig: {
        counterStyle: {
          height: '28px',
          backgroundColor: '#F58220',
          paddingLeft: '12px',
          paddingRight: '12px',
          color: '#FFF',
          lineHeight: '28px',
        },
        starContainer: {
          fontSize: '24px',
          backgroundColor: '#F2F2F2',
          height: '28px',
        },
        statusStyle: {
          height: '28px',
          backgroundColor: '#F58220',
          paddingLeft: '12px',
          paddingRight: '12px',
          color: '#FFF',
          lineHeight: '28px',
          minWidth: '100px',
          fontSize: '18px',
          textAlign: 'center',
        },
        tooltipStyle: {
          fontSize: '14px',
          padding: '5px',
        }
    }
}