react-rating-control

The RatingControl component allows you to set a rating score or show an already set rating in React applications.

Example

import { RatingControl } from "react-rating-control";
import { useCallback } from "react";

function App() {
  const onClick = useCallback((rate: number) => {
    console.log("set rating ", rate);
  }, []);
  return (
    <RatingControl
      char="★"
      charsAmount={5}
      enabled={true}
      fontsize="24px"
      onClick={onClick}
    />
  );
}

export default App;

Install

$ npm i react-rating-control

Configuration

You can customize the component by setting the following props.

Props

Name	Type	Default	Description
char	string	"★"	String element used to form the rating component
charStyles			Styles for char item (each element of the component). "@emotion/react" library is used.
charsAmount	number	5	Number of elements in a row
containerStyles			Styles for container (whole component). "@emotion/react" library is used.
enabled	boolean	true	Is enabled for set rating (true) or for display only (false)
fontsize	string	24 px	Font size of component
onClick	function		Callback for "onClick" event. (rate: number) => void Where rate value of established rate
primaryColor	string	"#ffc800"	For not rated or not hovered items of component
secondaryColor	string	"#9d9d9d"	For rated or hovered items of component
value	number	0	Used to set the initial value