React Rating Star

Rating Star UI Component powered by ReactJS

Installation

npm i rating-star

yarn add rating-star

Prerequisite

The version of React has to be 16.8.0 or above.

How To Use

Javascript / Typescript

import { RatingStar } from "rating-star";

export default function App() {
  const [rating, setRating] = React.useState(30);

  const onRatingChange = (score) => {
    setRating(score);
  };

  return (
    <div className="App">
      <h1>Rating Star</h1>
      <RatingStar
        clickable
        maxScore={100}
        id="123"
        rating={rating}
        onRatingChange={onRatingChange}
      />
    </div>
  );
}

For more details, can go to Demos.

Props

| Name | Description | | --------------------------- | ---------------------------------------------------- | | id | the element id | | clickable (optional) | enable click for the ratings, default is false | | noBorder (optional) | disable borders of the star icon, default is false | | size (optional) | icon size, default is 24 | | maxScore (optional) | the maximum score of the ratings, default is 5 | | rating (optional) | the current score, default is 0 | | numberOfStar (optional) | total number of star icons, default is 5 | | colors (optional) | colours of the star icon | | onRatingChange (optional) | a callback of rating changes |

Prop Types

interface ColourTheme {
  stroke: string;
  mask: string;
  rear: string;
}

interface RatingStarProps {
  id: string;
  clickable?: boolean;
  noBorder?: boolean;
  size?: number;
  maxScore?: number;
  rating?: number;
  numberOfStar?: number;
  colors?: Partial<ColourTheme>;
  onRatingChange?: (rating: number) => void;
}

Customise the Star Icon

You can customise the star icon with your needs.

Example:

import AcUnitIcon from "@material-ui/icons/AcUnit";
import { RatingStar } from "rating-star";

function App() {
  return (
    <RatingStar
      id="custom-icon-wow"
      rating={3}
      starIcon={AcUnitIcon}
      colors={{ mask: "#43a7e3" }}
      noBorder
    />
  );
}

Caveat

• The custom icon must be a SVG React component which contains only one child element.

  The child element can be one of:

  • path
  • polygon
  • circle
  • rect
  • image

  e.g.

  function CustomIcon() {
    return (
      <svg>
        <path d="..." />
      </svg>
    );
  }

Customise the Styles

You can customise the styles of the rating-star container by CSS class name, "rating-star",

or use the id you have assigned to the rating-star component.

Use with Styled Components

For styled-components lover, you can modify the styles with the power of the styled-components.

import styled from "styled-components";

import { RatingStarContainer, RatingStarIconsWrapper } from "rating-star";

const YourStyledComponent = styled.div`
  ${RatingStarContainer} {
    margin: 10px 0;
  }
  ${RatingStarIconsWrapper} {
    > svg {
      margin: 3px 0;
    }
  }
`;

Demos

• Fixed rating
• Controlled rating
• Customising the style
• Using different maximum score
• Using different number of star
• Using with styled-components
• Using with custom icon