タグ機能をフルスクラッチで開発しようと思っていたのですが、便利なReact Componentが沢山見つかったのでそちらを利用してみました。

環境

• React
• Babel
• Browserify
• React Tag Autocomplete
• npm

導入

npmでReact Tag Autocompleteを導入します。

npm install --save react-tag-autocomplete

インクルードの仕方は色々あるかと思いますが、今回の環境ではrequireを使います。

これで準備OKです。

実装

githubにUsageがありますが、ちょっと加工してapiをたたいてデータを取得してきたケースを想定してみます。（ここではsuperagentを使っています。）

apiではこんな感じのJsonレスポンスを返しています。

res.body.skillsのデバッグ

動作確認（余計なものが映っていますが・・）

cssは設定していないのですごくダサいですねｗ

他のオプションやcssのクラス名などgithubに丁寧に明記してあります。

所感

便利な時代だなぁヽ(´ー｀)ノ