react-rating-stars-component :star:

Forked from react-stars: https://github.com/n49/react-stars

A simple star rating component for your React projects (now with half stars and custom characters)

DEMO: https://codesandbox.io/s/elegant-mountain-w3ngk?file=/src/App.js

Get started quickly

Install react-stars package with NPM:

npm install react-rating-stars-component --save

Then in your project include the component:

import ReactStars from "react-rating-stars-component";
import React from "react";
import { render } from "react-dom";

const ratingChanged = (newRating) => {
  console.log(newRating);
};

render(
  <ReactStars
    count={5}
    onChange={ratingChanged}
    size={24}
    activeColor="#ffd700"
  />,

  document.getElementById("where-to-render")
);

Or use other elements as icons:

We do not support CSS for other third party libraries like fontawesome in this case. So you must import it by urself.

import ReactStars from "react-rating-stars-component";
import React from "react";
import { render } from "react-dom";

const ratingChanged = (newRating) => {
  console.log(newRating);
};

render(
  <ReactStars
    count={5}
    onChange={ratingChanged}
    size={24}
    isHalf={true}
    emptyIcon={<i className="far fa-star"></i>}
    halfIcon={<i className="fa fa-star-half-alt"></i>}
    fullIcon={<i className="fa fa-star"></i>}
    activeColor="#ffd700"
  />,

  document.getElementById("where-to-render")
);

API

This a list of props that you can pass down to the component:

| Property | Description | Default value | type | | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- | | classNames | Name of parent classes | null | string | | count | How many total stars you want | 5 | number | | value | Set rating value | 0 | number | | char | Which character you want to use as a star | ★ | string | | color | Color of inactive star (this supports any CSS valid value) | gray | string | | activeColor | Color of selected or active star | #ffd700 | string | | size | Size of stars (in px) | 15px | string | | edit | Should you be able to select rating or just see rating (for reusability) | true | boolean | | isHalf | Should component use half stars, if not the decimal part will be dropped otherwise normal algebra rools will apply to round to half stars | true | boolean | | emptyIcon | Use your own elements as empty icons | null | element | | halfIcon | Use your own elements as half filled icons | null | element | | filledIcon | Use your own elements as filled icons | null | element | | a11y | Should component be accessible and controlled via keyboard (arrow keys and numbers) | true | boolean | | onChange(new_rating) | Will be invoked any time the rating is changed | null | function |

Help improve the component

Build on your machine:

# Clone the repo
git clone git@github.com:ertanhasani/react-stars.git
# Go into project folder
cd react-stars
# Install dependancies
npm install

Build the component:

npm build

Run the examples (dev):

npm run dev-example

Build the examples (production):

npm run build-example

Then in your browser go to: http://127.0.0.1:8080/example

Requirements

You will need to have React in your project in order to use the component, I didn't bundle React in the build, because it seemed like a crazy idea.

Todo

• Make better docs
• Better state management
• Write tests