front10-rating is a simple and tiny Rating React Component

Installation

npm install front10-rating

or

yarn add front10-rating

Examples

Basic

import React from 'react';
import Rating from 'front10-rating';

const App = () => {
  return <Rating value={4.5} />;
};

Custom render

import React from 'react';
import Rating from 'front10-rating';
import apple from './apple.png';
import appleEmpty from './apple-empty.png';

const App = () => {
  return (
    <Rating
      value={4}
      renderFullItem={({ index }) => <img key={index} src={apple} />}
      renderEmptyItem={({ index }) => <img key={index} src={appleEmpty} />}
    />
  );
};

With some styles

import React from 'react';
import Rating from 'front10-rating';

const App = () => {
  return (
    <Rating
      value={3.5}
      width="60"
      height="60"
      color="indigo"
      emptyColor="yellow"
    />
  );
};

List of props

| Property | Type | Default | Description | | --------------- | -------- | --------- | -------------------------------------- | | allowRate | bool | false | Allow to rate | | showValue | bool | false | Define if show the value | | starsLength | number | 5 | Total of items to show | | value | number | 0 | Rating value | | width | string | '16' | width of the icon | | height | string | '16' | height of the icon | | color | string | '#ffc107' | color of the icon | | emptyColor | string | '#eceff1' | color of the empty icon | | renderItem | function | null | Function to render the Items | | renderFullItem | function | null | Function to render the marked items | | renderEmptyItem | function | null | Function to render the unmarked Items | | renderHalfItem | function | null | Function to render the half items | | onClick | function | null | Function to handle rate on click | | className | string | '' | className applied to the component | | style | object | null | inline styles applied to the component |