React wrapper of bootstrap-star-rating.
npm install --save react-bootstrap-star-ratingFirst of all you must load the following assets in your <head />.
(The last one is here.)
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="path/to/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />And in your app,
import React, { Component } from 'react';
import StarRating from 'react-bootstrap-star-rating';
import { render } from 'react-dom';
class App extends Component {
render() {
return (
<StarRating
defaultValue={5}
min={0}
max={10}
step={0.5} />
);
}
}
render(<App />, document.getElementById('app'));.
defaultValue:PropTypes.number
Options below are Plugin Options.
stars:PropTypes.numberglyphicon:PropTypes.boolsymbol:PropTypes.stringratingClass:PropTypes.stringmin:PropTypes.numbermax:PropTypes.numberstep:PropTypes.numberdisabled:PropTypes.boolreadonly:PropTypes.boolrtl:PropTypes.boolshowClear:PropTypes.boolshowCaption:PropTypes.boolsize:PropTypes.stringdefaultCaption:PropTypes.stringstarCaptions:PropTypes.oneOfType([PropTypes.object, PropTypes.func])starCaptionClasses:PropTypes.oneOfType([PropTypes.object, PropTypes.func])clearButton:PropTypes.stringclearButtonTitle:PropTypes.stringclearButtonBaseClass:PropTypes.stringclearButtonActiveClass:PropTypes.stringclearValue:PropTypes.stringclearCaption:PropTypes.stringclearCaptionClass:PropTypes.stringcaptionElement:PropTypes.stringclearElement:PropTypes.stringhoverEnabled:PropTypes.boolhoverChangeCaption:PropTypes.boolhoverChangeStars:PropTypes.boolhoverOnClear:PropTypes.bool
Options below are Plugin Events.
onRatingChange:PropTypes.funconRatingClear:PropTypes.funconRatingReset:PropTypes.funconRatingHover:PropTypes.funconRatingHoverleave:PropTypes.func
These are Plugin Methods.
updaterefreshresetcleardestroycreate
class App extends Component {
componentDidMount() {
setTimeout(() => {
this.starRating.update(1);
}, 1000);
}
render() {
return (
<StarRating
ref={ref => { this.starRating = ref; }} />
);
}
}