@rubenvara/react-star-rating

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:

Prop	Type	Default	Required	Description
rating	Number	-	Yes	The rating. Any number from 0 to 5.0
config	Object	{}	No	Config options for the component. See below
style	Object	{}	No	CSS styles passed directly to the container component

About the config object:

Option	Type	Default	Description
fullColor	String	'#ffcf00'	The color for the filling of the stars
emptyColor	String	'#7f7f7f'	The color for the empty parts of the stars
size	Number	20	The size of the stars. Pass a number of pixels.
showText	Boolean	false	Show the rating number next to the stars or not

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.