react-icon-rating

0.3.0 • Public • Published

react-icon-rating

A react component for simple straightforward rating manipulation

gif:

gif

Installation


npm install react-icon-rating

Usage


Examples showing five stars


Declaration:

var IconRating = require('react-icon-rating')

Font-Awesome 4:

<IconRating toggledClassName="fa fa-star" untoggledClassName="fa fa-star-o"/>

Half stars with Font-Awesome 4: <IconRating toggledClassName="fa fa-star" untoggledClassName="fa fa-star-o" halfClassName="fa fa-star-half-o" />

Glyphicons:

<IconRating toggledClassName="glyphicon glyphicon-star" untoggledClassName="glyphicon glyphicon-star-empty"/>

Others: The component assumes the icon is contained inside an tag, fill the class names in accordingly. Do note, that you can pass additional classes to the IconRating for styling purposes.

Events


Pass an onChange property to the component. It takes a function of with parameters: function onChange(number){ //number is the rating the user has clicked }

Browser Compatibility


Out of the box, shouldn't have issues with an exception of the half stars. Calculation for div quadrant may not work in some browsers. Please file an issue!

License

MIT

Package Sidebar

Install

npm i react-icon-rating

Weekly Downloads

8

Version

0.3.0

License

MIT

Last publish

Collaborators

  • dlau
  • imchuck