https://github.com/voronianski/react-star-rating-component

Basic React component for star (or any other icon based) rating elements
https://github.com/voronianski/react-star-rating-component

component react star-ratings

Last synced: 4 days ago
JSON representation

Basic React component for star (or any other icon based) rating elements

• Host: GitHub
• URL: https://github.com/voronianski/react-star-rating-component
• Owner: voronianski
• License: mit
• Created: 2015-11-17T22:28:47.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2023-02-11T00:46:32.000Z (almost 2 years ago)
• Last Synced: 2025-01-01T11:02:27.146Z (about 1 month ago)
• Topics: component, react, star-ratings
• Language: JavaScript
• Homepage: http://voronianski.github.io/react-star-rating-component/example
• Size: 867 KB
• Stars: 380
• Watchers: 10
• Forks: 77
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-star-rating-component

[![npm version](http://badge.fury.io/js/react-star-rating-component.svg)](http://badge.fury.io/js/react-star-rating-component)

[![Dependency Status](http://david-dm.org/voronianski/react-star-rating-component.svg)](http://david-dm.org/voronianski/react-star-rating-component)

[![Download Count](http://img.shields.io/npm/dm/react-star-rating-component.svg?style=flat)](http://www.npmjs.com/package/react-star-rating-component)

> Tiny [React.js](https://facebook.github.io/react) component for star (or any other *icon based*) ratings.

## Install

```bash

npm install react-star-rating-component --save

```

## Demo

[](http://voronianski.github.io/react-star-rating-component/example)

## Props

```javascript

```

## Examples

### Editable 

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import StarRatingComponent from 'react-star-rating-component';

class App extends React.Component {

  constructor() {

    super();

    this.state = {

      rating: 1

    };

  }

  onStarClick(nextValue, prevValue, name) {

    this.setState({rating: nextValue});

  }

  render() {

    const { rating } = this.state;

    

    return (                

      


        
Rating from state: {rating}

        

      

    );

  }

}


ReactDOM.render(

  , 

  document.getElementById('app')

);

```

### Non-editable (with custom icons)

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import StarRatingComponent from 'react-star-rating-component';

class App extends React.Component {

  render() {

    const { rating } = this.state;

    return (                

      


        
Rating from state: {rating}

         }

          starCount={10}

          value={8}

        />

      

    );

  }

}


ReactDOM.render(

  , 

  document.getElementById('app')

);

```

Check more in [examples folder](https://github.com/voronianski/react-star-rating-component/tree/master/example).

---

**MIT Licensed**