React Bootstrap Star Rating
React wrapper of bootstrap-star-rating.
Install
npm install --save react-bootstrap-star-rating
Usage
First 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'));
.
Image
Props
defaultValue
: PropTypes.number
Options below are Plugin Options.
stars
: PropTypes.number
glyphicon
: PropTypes.bool
symbol
: PropTypes.string
ratingClass
: PropTypes.string
min
: PropTypes.number
max
: PropTypes.number
step
: PropTypes.number
disabled
: PropTypes.bool
readonly
: PropTypes.bool
rtl
: PropTypes.bool
showClear
: PropTypes.bool
showCaption
: PropTypes.bool
size
: PropTypes.string
defaultCaption
: PropTypes.string
starCaptions
: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
starCaptionClasses
: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
clearButton
: PropTypes.string
clearButtonTitle
: PropTypes.string
clearButtonBaseClass
: PropTypes.string
clearButtonActiveClass
: PropTypes.string
clearValue
: PropTypes.string
clearCaption
: PropTypes.string
clearCaptionClass
: PropTypes.string
captionElement
: PropTypes.string
clearElement
: PropTypes.string
hoverEnabled
: PropTypes.bool
hoverChangeCaption
: PropTypes.bool
hoverChangeStars
: PropTypes.bool
hoverOnClear
: PropTypes.bool
Options below are Plugin Events.
onRatingChange
: PropTypes.func
onRatingClear
: PropTypes.func
onRatingReset
: PropTypes.func
onRatingHover
: PropTypes.func
onRatingHoverleave
: PropTypes.func
Additional API
These are Plugin Methods.
update
refresh
reset
clear
destroy
create
class App extends Component {
componentDidMount() {
setTimeout(() => {
this.starRating.update(1);
}, 1000);
}
render() {
return (
<StarRating
ref={ref => { this.starRating = ref; }} />
);
}
}
See Also