@rubenvara/react-star-rating v1.0.1

React Star Rating

What is this

A simple React component that shows a rating from 0 to 5 with svg stars. Just need to pass a number. No dependencies required.

Installation

As with any other node package in React, Gatsby, Next.js, etc.:

npm i @rubenvara/react-star-rating

Usage

The package exports a React component.

The component takes a number of props:

About the config object:

About the style prop: It accepts an object of css styles, written in camelCase to inline in JSX components. It is passed directly, unchecked, to the main div. Use it cautiously. Check the example below.

Be aware

• Any css-valid color is accepted (hsl, hex, rgb, string, etc.).
• Stars are 1:1 proportionate (width equals height, so both equal the size property).
• If the rating number is shown (when config.showText = true), font size is half the star size or 16px, whichever is higher.

Example

Use it as follows:

Simple

import StarRating from '@rubenvara/react-star-rating';

// ...

return <StarRating rating={3.35} />;

// ...

Output:

More advanced

import StarRating from '@rubenvara/react-star-rating';

// ...

const rating = 3.35;
const config = {
  fullColor: '#f05',
  emptyColor: 'hsl(240, 80%, 85%)',
  size: 42,
  showText: true,
};
const style = {border: `1px solid`, borderColor: `firebrick`, padding: 12};

// ...

return <StarRating rating={rating} config={config} style={style} />;

//...

Output:

Be careful

• Passing a rating higher than 5.0 or lower than 0.0 will break the component.

Future?

• Write tests.
• Check the user input rating and return an error or something more usefull than just breaking the thing.
• Improve styling of the rating number.