Giter VIP home page Giter VIP logo

react-rating's Introduction

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

Property Type Default Description
start number 0 Range starting value (exclusive).
stop number 5 Range stop value (inclusive).
step number 1 Step increment (positive) or decrement (negative).
initialRate number undefined Initial rate value.
empty element or object or string or array Style.empty React 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).
full element or object or string or array Style.full React 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).
readonly bool false Whether the rating can be modified or not.
fractions number 1 Number of equal parts that make up a whole symbol.

Callbacks

Callback Type Description
onChange function (rate) {} Called when the selected rate is changed.
onRate function (rate) {} Called when a rate is entered or left. When a rate is left it is called with undefined.

License

MIT License

react-rating's People

Contributors

dreyescat avatar joargp avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.