React Bootstrap Star Rating

React Bootstrap Star Ratingを作った.

作ったので軽く紹介する.
GitHubはReact Bootstrap Star Rating.

  1. React Bootstrap Star Rating
  2. See Also

React Bootstrap Star Rating

作り始めた動機はあるプロジェクトでBowerでjQueryが使われており、 commitするにあたってそれらを殲滅しnpmとReactを導入しようと思ったが、 どうもReactには良い感じのStar rating libraryが無かったから.

Star Rating in React

npmのdownload statsで一番だったのはreact-star-rating (939 downloads in the last month) で、 それ以外はほとんど使われていないようだった.

react-star-ratingはどうかというと、GitHubのcommitはa month agoでProject pageもあり、 ある程度は開発されていそうだったが、どうも件のProjectのowner曰くstyleがイケていないらしい.

/20151213/react-star-rating.png

ということで、件のProjectで使用していたjQuery pluginをReactでwrapして使うことした. (DEMOをみる限り、色々customizableっぽい.)

/20151213/bootstrap-star-rating.gif

Wrap jQuery plugin

作ったといってもjQuery pluginをwrapしただけ (どうもnpmにpublishしていなかっただけで、package.jsonはあった.) なので、 wrapする際の常套patternを軽く紹介する.

DOM node

jQuery pluginなのでDOM nodeに対して操作を行う.

$('#rating').rating();

これをReactで実装する際は ref を使用する.

class StarRating extends Component {
  componentDidMount() {
    $node.rating();
  }

  render() {
    return (
      <input
        ref={node => { this.$node = $(node); }} />
    );
  }
}

Export API

今回のbootstrap-star-ratingは強制にvalueをupdateするAPIがあった.

$('#rating').rating('update', 5);

これをReactで実装する際は method として定義して、 ref を通して呼び出す.

class StarRating extends Component {
  componentDidMount() {
    $node.rating();
  }

  render() {
    return (
      <input
        ref={node => { this.$node = $(node); }} />
    );
  }

  update(value) {
    $node.rating('update', value);
  }
}

class App extends Component {
  componentDidMount() {
    setTimeout(() => {
      this.starRating.update(5);
    }, 1000);
  }

  render() {
    return (
      <StarRating
        ref={ref => { this.starRating = ref; }} />
    );
  }
}

Result

簡単にwrapして別のLibraryとして切り出しただけなのでjQueryを無くせたわけでは無いが、
直接の依存からはremoveできるようになったので心のざわつきは無くせたかな.

See Also