Reactでロード中indicatorを表示するcomponentをRailsに組み込む
react-spinkitを使ってみます。
以下にデモも用意してくれてます。
classnamesとobject-assignというライブラリを使用しているので、こちらをnpmでインストールしておくのを忘れないように。
$ npm install classnames object-assign --save
ソース中ではclassnamesはcx, object-assignはassignとして使われてるので、どこかでrequireしておきます。
cx = require("classnames"); assign = require("object-assign");
こちらのソースから直接componentをassetsのディレクトリにぶち込みました。
https://github.com/KyleAMathews/react-spinkit/blob/master/src/index.jsx
そして、必要なcssファイルも一通りRailsのasset pipelineに乗るようにしておきます。
https://github.com/KyleAMathews/react-spinkit/tree/master/css
ここまでくれば後は、Viewを呼び出すだけです。hamlから直接このComponentを呼び出すなり、子componentとして呼び出すなり。
私の今回の場合だと、render()メソッドでreturnする内容をstateによって切り替えて、load中ならSpinner componentが挿されるような感じで使いました。
これでloadingのanimationを簡単に実装することができました。便利！
