React-bootstrap-star-rating NPM

React 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; }} />
    );
  }
}

react-bootstrap-star-rating v3.5.5-alpha.0.3

React Bootstrap Star Rating

Install

Usage

Image

Props

Additional API

See Also