Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-rating

Package Overview
Dependencies
Maintainers
1
Versions
63
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-rating

A rating react component with custom symbols

  • 0.9.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
44K
increased by30.12%
Maintainers
1
Weekly downloads
 
Created
Source

React Rating

React Rating is a react rating component which supports custom symbols both with inline styles and glyphicons found in popular CSS Toolkits like Fontawesome or Bootstrap.

I intend to port the jQuery bootstrap-rating to a React component.

Demo

See react-rating in action.

Installation

You can install react-rating component using the npm package manager:

npm install --save react-rating

Dependencies

The react-rating component peer depends on the React library.

You can install React using npm too:

npm install --save react

Usage

  1. Require the Rating Component

    var Rating = require('react-rating');
    
  2. Start using it

    With raw javascript:

    React.createElement(Rating)
    

    Or with JSX:

    <Rating />
    

Properties

PropertyTypeDefaultDescription
startnumber0Range starting value (exclusive).
stopnumber5Range stop value (inclusive).
stepnumber1Step increment (positive) or decrement (negative).
placeholderRatenumberundefinedPlaceholder rate value.
initialRatenumberundefinedInitial rate value.
emptyelement or object or string or arrayStyle.emptyReact element, inline style object, or classes applied to the rating symbols when empty. Or an array of such symbols that will be applied in a circular manner (round-robin).
placeholderelement or object or string or arrayStyle.fullReact element, inline style object, or classes applied to the rating symbols in HTML input placeholder fashion. Or an array of such symbols that will be applied in a circular manner (round-robin).
fullelement or object or string or arrayStyle.fullReact element, inline style object, or classes applied to the rating symbols when full. Or an array of such symbols that will be applied in a circular manner (round-robin).
readonlyboolfalseWhether the rating can be modified or not.
quietboolfalseWhether to animate rate hovering or not.
fractionsnumber1Number of equal parts that make up a whole symbol.

Callbacks

CallbackTypeDescription
onChangefunction (rate) {}Called when the selected rate is changed.
onClickfunction (rate, event) {}Called when a rate is clicked.
onRatefunction (rate) {}Called when a rate is entered or left. When a rate is left it is called with undefined.

License

MIT License

Keywords

FAQs

Package last updated on 13 Dec 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc