https://github.com/ninjasort/react-star-rating

[Looking for Maintainers (email me)]: A simple star rating component built with React.
https://github.com/ninjasort/react-star-rating

react star-rating-component

Last synced: 24 days ago
JSON representation

[Looking for Maintainers (email me)]: A simple star rating component built with React.

• Host: GitHub
• URL: https://github.com/ninjasort/react-star-rating
• Owner: ninjasort
• License: mit
• Created: 2015-02-27T03:05:46.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2022-11-08T14:28:46.000Z (about 2 years ago)
• Last Synced: 2024-12-16T19:50:09.066Z (27 days ago)
• Topics: react, star-rating-component
• Language: JavaScript
• Homepage:
• Size: 1.5 MB
• Stars: 173
• Watchers: 5
• Forks: 55
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Changelog: changelog.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components-all - react-star-rating - A simple star rating component built with React. (Uncategorized / Uncategorized)

README

        
# react-star-rating ![](https://david-dm.org/cameronjroe/react-star-rating.svg)

[![NPM](https://nodei.co/npm/react-star-rating.png?compact=true)](https://nodei.co/npm/react-star-rating/)

![](src/assets/star-rating.png)

> A simple star rating component built with React.

## Install

```sh

$ npm install react-star-rating --save

```

Include the css:

```html

```

## Usage

### ES6

```js

import React from 'react';

import StarRating from 'react-star-rating';

class FormComponent extends React.Component {

  render() {

    return (

      

        

        Submit Rating

      

    );

  }

}

React.render(, document.getElementById('star-rating'));

```

### ES5

```js

var React = require('react');

var StarRating = require('react-star-rating');

var FormComponent = React.createClass({

    render: function () {

      return (

        

          

          Submit Rating

        

      );

    }

});

React.render(, document.getElementById('star-rating'));

```

## Options

  - **name**={string} - name for form input (required)

  - **caption**={string} - caption for rating (optional)

  - **totalStars**={number} - rating amount (required, default: 5)

  - **rating**={number} - a set rating between the rating amount (optional)

  - **disabled**={boolean} - whether to disable the rating from being selected (optional)

  - **editing**={boolean} - whether the rating is explicitly in editing mode (optional)

  - **size**={number} - size of stars (optional)

  - **onRatingClick**={function} - a handler function that gets called onClick of the rating (optional) - gets passed (event, {position, rating, caption, name})

## Todo

- [x] Fix ES6 bug with bundling

- [x] Add svg stars

- [x] Double-check touch support works

- [ ] Re-implement star hovering (kinda janky right now)

## License

[MIT](https://github.com/cameronjroe/react-star-rating/blob/master/LICENSE)