【React】タグ検索モジュールの比較【react-tags-input】
方法
(1)react-tag-input
まず最初にこちらに倣って実装。
React-dndに関するモジュールのバージョンは以下の通りです。
react-dnd: ^5.0.0 react-dnd-html5-backend: ^3.0.2
少しでもずれてしまうと、以下のエラーが発生しますのでご注意を。
(0 , _reactDnd.DragDropContext) is not a function
実装してみましたが、CSSファイルがインポートしたデータの中身に存在せず、
デザインがイマイチ適用されていないなあ・・・。
上記の記事では、しっかりとデザインまで実装できていたので、
もう少し粘れば良かったが、もっと楽そうな方法を見つけてしまった。
(2)@pathofdev/react-tag-input
@pathofdev/react-tag-inputをインストールすると、一瞬で実装できます。
READ MEです。
インストール方法は以下の通りです。
## インストール $ npm i --save-dev react-tag-input
以下の記事を参考にプログラムをそっくりそのまま書くだけで実装できます。
こちらはCSSとSCSSもそのままインポートできるので、整ったデザインになっています。
TypeScript（tsxファイル）でも適用できるそうなので、こっちの方がオススメです！
