front10-rating is a simple and tiny rating component that you can customize via renderProps.

Installation

npm install --save front10-rating

Examples

Basic

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

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

Custom render

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

const App = () => {
  return (
    <Rating
      value={3}
      renderFullItem={i => <span key={i}>🍎</span>}
      renderEmptyItem={i => <span key={i}>🍏</span>}
    />
  );
};

With some styles

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

const App = () => {
  return <Rating value={4} className="text-purple bg-white font-size-6" />;
};

List of props

Property	Type	Default	Description
allowRate	bool	false	Allow to rate
starsLength	number	5	Total of items to show
value	number	0	Rating value
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
onKeyPress	function	null	Function to handle rate on key press
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