読者です 読者をやめる 読者になる 読者になる

Reactでロード中indicatorを表示するcomponentをRailsに組み込む

React JavaScript Rails Rails5

react-spinkitを使ってみます。

github.com

以下にデモも用意してくれてます。

React Spinkit

classnamesとobject-assignというライブラリを使用しているので、こちらをnpmでインストールしておくのを忘れないように。

GitHub - JedWatson/classnames: A simple javascript utility for conditionally joining classNames together

$ 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を簡単に実装することができました。便利!