公開されているReact Componentを利用してみる #React

今回はちょっと趣向を変えて公開されているComponentの利用について書きたいと思います。

Componentは基本的にはPropがI/Fとなっているのでドキュメントを見てよくわからなかった場合は、Propを見るとどのようなI/Fがあるかわかると思います。

自分が公開する場合は、PropTypesやgetDefaultPropsを使ってI/Fを明確にしておくといいと思います。

Bootstrap

何はともあれまずは定番のBootstrapですがやはりちゃんとあります。
前回のRouterのサンプルでも使っていました。

使う場合は、react-bootstrapの他に別途bootstrapのCSSを読み込む必要があります。

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

使い方としては、bootstrapの各ComponentがReactComponentになっているのでそれを他のComponentと同様に使っていくだけです。

var {Jumbotron, Col} = require('react-bootstrap');

module.exports = React.createClass({
  render() {
    <Col xs={6} md={4} key={video.id}>
      <Jumbotron>
        <Video from={type} id={video.id} />
       <p>{video.title}</p>
      </Jumbotron>
    </Col>
  }
});

↑のページで実装を見ることが出来るので、Propの仕様などを確認することが出来ます。

Componentを探す

React Components

ReactComponentが集まっているサイトでここで欲しい物を探すことが出来ます。
ここにあるComponentはnpmのkeywordにreact-componentが入っているものが対象になっています。

React Rocks

Componentが集まっているというより色々なReactComponentを使ったサンプルが紹介されているサイトです。実際に動くものを見ることが出来るので参考になります。

こんなのとか http://freiksenet.github.io/react-calendar/#

GitHubのwiki

あと、ReactのGitHub Repositoryにはwikiがあって、そこにもUI Componentが色々と紹介されているのでオススメです。

実際にComponentを探して使ってみる(react-video編)

それでは例としてreact-videoという、youtubeとvimeoのplayerを表示してくれるComponentを実際に使ってみたいと思います。

https://github.com/pedronauck/react-video

使ったサンプル

http://react-ssr-sample.herokuapp.com/youtube

使い方

基本的な使い方はtypeとidを指定するだけなのでとても簡単です。

var Video = require('react-video');

type = 'youtube' // or 'vimeo'
<Video from={type} id={video.id} />

CSS

あと、注意点としては、このCSSを読み込んでおく必要があります。

requireして読み込むだけでCSSもなんとかしてくれるようになるといいですが...。

I/Fを確認する

react-videoの場合はREADME見るとわかるのですが、I/Fをどうなっているのかも確認してみます。

propTypesとgetDefaultPropsを見ると、

fromにはyoutubeかvimeoが指定出来て必須
idは文字列で必須
classNameも指定出来てデフォルトはvideoというクラス

ということがわかります。
propTypesちゃんと書いておくといいですね。

  propTypes: {
    from: React.PropTypes.oneOf(['youtube', 'vimeo']).isRequired,
    id: React.PropTypes.string.isRequired
  },
  getDefaultProps() {
    return {
      className: 'video'
    };
  },

というわけで今回は誰かが作ったComponentの利用について書きました。

明日はテストについて書きたいと思います。