❤
npm
Sign UpSign In

react-star-rating-personal

1.0.0 • Public • Published

React Bootstrap Star Rating

npm version

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

Readme

Keywords

Package Sidebar

Install

npm i react-star-rating-personal

Repository

github.com/longnguyen160/react-bootstrap-star-rating

Homepage

github.com/longnguyen160/react-bootstrap-star-rating#readme

Weekly Downloads

0

Version

1.0.0

License

BSD-3-Clause

Last publish

Collaborators

  • tooomm
Try on RunKit
Report malware