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