Pre-Rating is a composition that offers rating with font-awesome icons.
npm install --save pre-rating
<Rating currentValue={8}
onChange={this.__handleChange}
onMouseOver={this.__handleMouseOver}
/>
<Rating size={2}
currentValue={4.5}
onChange={this.__handleChange}
disabled
/>
--- With another font-awesome icons ---
<Rating size={1}
iconCount={5}
initialIcon="fa-heart-o"
selectedIcon="fa-heart"
style={{color: "red"}}
onChange={this.__handleChange}
/>
--- Functions return event ----
__handleMouseOver(e) {
console.log(e.target.value, e.target.parsedValue);
}
__handleChange(e) {
console.log(e.target.value, e.target.parsedValue);
};
Name | Type | Default | Required | Description |
---|---|---|---|---|
size | number | 0 | false | Size of Rating icons. Possible Values : 0,1,2,3,4 |
currentValue | number | - | false | Direct selected value. |
iconCount | number | 10 | false | Count of icons. |
initialIcon | string | fa-star-o | false | Initial icon type (Works with font-awesome icons like "fa-star-o"). |
selectedIcon | string | fa-star | false | Selected icon type (Works with font-awesome icons like "fa-star"). |
disabled | bool | false | false | Disable icons. |
onChange | func | - | false | Change event for the component (Returns (clickedKey)). |
onMouseOver | func | - | false | MouseOver event for the component (Returns (hoveredKey)). |
style | object | - | false | Style of Rating icons. |
label | string | - | false | Label for Rating component. |
You can start by cloning the latest version of pre-rating.
This will install both run-time project dependencies and developer tools listed in package.json file.
This will start the development server and serve site application.
$ npm start
Open Browser and enter http://localhost:3000
(default)
If you need just to build the app (without running a dev server), simply run:
$ npm run build
If you need just to build the app (without running a dev server), simply run:
$ npm run site
The MIT License (MIT) Copyright (c) 2017 Fatih Totrakanlı