浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React】Reactのプロジェクトで使える絵文字ライブラリ

実際に使ったわけではないのですが、今後使いそうなので備忘録としてまとめ。
React のプロジェクトで使用できる絵文字ライブラリについてです。

参考にさせていただいた記事はこちらから。

[React]Slack風の絵文字ライブラリEmojiMartの使い方 – Qiita
https://qiita.com/ozaki25/items/f8207cf4a2e7e4a95e89

上記記事では「emoji-mart」というライブラリの使い方が紹介されており、こちらは Slack 等でよく見る絵文字のピッカーを実装することができます。

 

GitHub のページはこちら。

missive/emoji-mart: One component to pick them all 👊🏼
https://github.com/missive/emoji-mart

まだ実際に実装したわけではなく、ざっと見てみただけですが、実装は簡単そうでした。
絵文字一覧の見出しのテキストも任意で変えられるし、絵文字のサイズも調節が可能で、カスタマイズ性もよさそうです。

また、「emoji-mart」以外にも、「emoji-picker-react」というライブラリも紹介されていました。
「emoji-picker-react」の GitHub はこちらです。

ealush/emoji-picker-react: React Emoji Picker
https://github.com/ealush/emoji-picker-react

「emoji-mart」とほぼ同じ見た目で、実装方法もよく似ており…正直、どちらを使っても同じな気がします…。
個人的には、Qiita の記事で紹介されていた「emoji-mart」の方を使ってみようかなと思っています。

 

以上、React プロジェクトで絵文字を実装できるライブラリ「emoji-mart」と「emoji-picker-react」のご紹介でした。
実際にプロジェクトに実装したら、実装手順等を改めてご紹介したいと思います。
ご参考になれば幸いです。

  • この記事いいね! (0)