new-react-stars v2.2.8

react-stars :star:

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

This is a Fork

This is a fork of the original react-stars project. The original project is no longer maintained and I needed to add some features to it. I will try to keep this fork up to date with the original project.

Changes

• Migrate source code to TypeScript
• Added storybook for development
• Added rollup for building
• Functional component instead of class component
• Support for react 19

Issues Fixed

• Warning: componentWillReceiveProps has been renamed
• Prop 'dangerouslySetInnerHTML' did not match.
• Others? ...

Get started quickly

Install react-stars package with NPM:

npm install new-react-stars --save

Then in your project include the component:

import ReactStars from 'new-react-stars'
import React from 'react'
import { render } from 'react-dom'

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

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

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

API

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

Help improve the component

Build on your machine:

# Clone the repo
git clone git@github.com:n49/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