React Rating

Description

A react rating component which supports custom symbols with inline styles and glyphicons.

React

ADD_DEPENDENCY

  var Rating = ReactRating;
  var SVGIcon = React.createClass({
    render: function () {
      // Namespaced attributes are not supported in JSX. As a workaround
      // we can use the dangerouslySetInnerHTML to set the innerHTML property.
      // See https://github.com/facebook/react/issues/2250
      var svg =
        '<svg class="' + this.props.className + '">' +
          '<use xlink:href="' + this.props.href + '"></use>' +
        '</svg>';
      return React.createElement('div', {
        dangerouslySetInnerHTML: {__html: svg}
      });
    }
  });
  React.render(React.createElement(Rating, {
    empty: React.createElement('span', {
      className: 'icon-text'
    }, '-'),
    full: [
      React.createElement('span', {
        className: 'icon-text'
      }, '1'),
      React.createElement('span', {
        className: 'icon-text'
      }, '2'),
      React.createElement('span', {
        className: 'icon-text'
      }, '3'),
      React.createElement('span', {
        className: 'icon-text'
      }, '4'),
      React.createElement('span', {
        className: 'icon-text'
      }, '5'),
    ]
  }), document.getElementById('rating-span'));
  React.render(React.createElement(Rating, {
    empty: React.createElement('img', {
      src: 'assets/images/star-empty.png',
      className: 'icon'
    }),
    full: React.createElement('img', {
      src: 'assets/images/star-full.png',
      className: 'icon'
    })
  }), document.getElementById('rating-img'));
  React.render(React.createElement(Rating, {
    empty: React.createElement(SVGIcon, {
      href: '#icon-star-empty',
      className: 'icon'
    }),
    full: React.createElement(SVGIcon, {
      href: '#icon-star-full',
      className: 'icon'
    })
  }), document.getElementById('rating-svg'));
  React.render(React.createElement(Rating),
    document.getElementById('rating-default'));
  React.render(React.createElement(Rating, {
    initialRate: 3,
    readonly: true
  }), document.getElementById('rating-default-readonly'));
  React.render(React.createElement(Rating, {
    initialRate: 2.5,
    readonly: true
  }), document.getElementById('rating-default-readonly-fractional'));
  React.render(React.createElement(Rating, {
    onChange: function (rate) {
      alert(rate);
    }
  }), document.getElementById('rating-default-change'));
  React.render(React.createElement(Rating, {
    onRate: function (rate) {
      document.getElementById('label-onrate').innerHTML = rate || '';
    }
  }), document.getElementById('rating-default-onrate'));
  React.render(React.createElement(Rating, {
    stop: 10
  }), document.getElementById('rating-default-1-to-10'));
  React.render(React.createElement(Rating, {
    start: 4,
    stop: 10
  }), document.getElementById('rating-default-5-to-10'));
  React.render(React.createElement(Rating, {
    stop: 10,
    step: 2
  }), document.getElementById('rating-default-1-to-10-step-2'));
  React.render(React.createElement(Rating, {
    start: 11,
    stop: 1,
    step: -2
  }), document.getElementById('rating-default-10-to-1-step--2'));
  // Fontawesome.
  React.render(React.createElement(Rating, {
    empty: 'fa fa-star-o fa-2x',
    full: 'fa fa-star fa-2x'
  }), document.getElementById('rating-fontawesome-star'));
  React.render(React.createElement(Rating, {
    empty: 'fa fa-star-o fa-2x',
    full: 'fa fa-star fa-2x',
    fractions: 2
  }), document.getElementById('rating-fractional'));
  // Bootstrap.
  React.render(React.createElement(Rating, {
    empty: 'glyphicon glyphicon-heart-empty',
    full: 'glyphicon glyphicon-heart'
  }), document.getElementById('rating-bootstrap-heart'));
  // Mixing symbols.
  React.render(React.createElement(Rating, {
    empty: ['fa fa-star-o fa-2x', 'fa fa-heart-o fa-2x'],
    full: ['fa fa-star fa-2x', 'fa fa-heart fa-2x']
  }), document.getElementById('rating-mixed'));
  React.render(React.createElement(Rating, {
    stop: 6,
    empty: ['fa fa-star-o fa-2x low', 'fa fa-star-o fa-2x low',
      'fa fa-star-o fa-2x medium', 'fa fa-star-o fa-2x medium',
      'fa fa-star-o fa-2x high', 'fa fa-star-o fa-2x high'],
    full: ['fa fa-star fa-2x low', 'fa fa-star fa-2x low',
      'fa fa-star fa-2x medium', 'fa fa-star fa-2x medium',
      'fa fa-star fa-2x high', 'fa fa-star fa-2x high'],
  }), document.getElementById('rating-colored'));
  React.render(React.createElement(Rating, {
    stop: 4,
    empty: 'fa fa-battery-empty fa-2x',
    full: ['fa fa-battery-1 fa-2x', 'fa fa-battery-2 fa-2x',
      'fa fa-battery-3 fa-2x', 'fa fa-battery-4 fa-2x']
  }), document.getElementById('rating-custom'));