react-star-rating-component-unsafe

    1.4.3 • Public • Published

    react-star-rating-component-unsafe

    npm version Dependency Status Download Count

    Tiny React.js component for star (or any other icon based) ratings.

    Install

    npm install react-star-rating-component-unsafe --save

    Demo

    Props

    <StarRatingComponent
        name={String} /* name of the radio input, it is required */
        value={Number} /* number of selected icon (`0` - none, `1` - first) */
        starCount={Number} /* number of icons in rating, default `5` */
        onStarClick={Function(nextValue, prevValue, name)} /* on icon click handler */
        onStarHover={Function(nextValue, prevValue, name)} /* on icon hover handler */
        onStarHoverOut={Function(nextValue, prevValue, name)} /* on icon hover out handler */
        renderStarIcon={Function(nextValue, prevValue, name)} /* it should return string or react component */
        renderStarIconHalf={Function(nextValue, prevValue, name)} /* it should return string or react component */
        starColor={String} /* color of selected icons, default `#ffb400` */
        emptyStarColor={String} /* color of non-selected icons, default `#333` */
        editing={Boolean} /* is component available for editing, default `true` */
    />

    Examples

    Editable

    import React from 'react';
    import ReactDOM from 'react-dom';
    import StarRatingComponent from 'react-star-rating-component-unsafe';
     
    class App extends React.Component {
      constructor() {
        super();
     
        this.state = {
          rating: 1
        };
      }
     
      onStarClick(nextValue, prevValue, name) {
        this.setState({rating: nextValue});
      }
     
      render() {
        const { rating } = this.state;
        
        return (                
          <div>
            <h2>Rating from state: {rating}</h2>
            <StarRatingComponent 
              name="rate1" 
              starCount={10}
              value={rating}
              onStarClick={this.onStarClick.bind(this)}
            />
          </div>
        );
      }
    }
     
    ReactDOM.render(
      <App />, 
      document.getElementById('app')
    );

    Non-editable (with custom icons)

    import React from 'react';
    import ReactDOM from 'react-dom';
    import StarRatingComponent from 'react-star-rating-component';
     
    class App extends React.Component {
      render() {
        const { rating } = this.state;
     
        return (                
          <div>
            <h2>Rating from state: {rating}</h2>
            <StarRatingComponent 
              name="rate2" 
              editing={false}
              renderStarIcon={() => <span></span>}
              starCount={10}
              value={8}
            />
          </div>
        );
      }
    }
     
    ReactDOM.render(
      <App />, 
      document.getElementById('app')
    );

    Check more in examples folder.


    MIT Licensed

    Install

    npm i react-star-rating-component-unsafe

    DownloadsWeekly Downloads

    3

    Version

    1.4.3

    License

    MIT

    Unpacked Size

    70.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • aryasadeghy