1.1.1 • Published 2 years ago

react-rating-control v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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

NameTypeDefaultDescription
charstring"★"String element used to form the rating component
charStylesStyles for char item (each element of the component). "@emotion/react" library is used.
charsAmountnumber5Number of elements in a row
containerStylesStyles for container (whole component). "@emotion/react" library is used.
enabledbooleantrueIs enabled for set rating (true) or for display only (false)
fontsizestring24 pxFont size of component
onClickfunctionCallback for "onClick" event. (rate: number) => void Where rate value of established rate
primaryColorstring"#ffc800"For not rated or not hovered items of component
secondaryColorstring"#9d9d9d"For rated or hovered items of component
valuenumber0Used to set the initial value
1.1.1

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago