【React】Slackっぽい絵文字ピッカーを実装できる「emoji-mart」ライブラリ

先日紹介した「emoji-mart」ライブラリを、Electron ＆ React のプロジェクトに実装したので手順等をまとめ。
と言っても、特に手間取ることもなく、簡単に実装出来ました！

ライブラリの GitHub はこちら。

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

インストール手順ですが、まず下記コマンドを実行します。

npm install --save emoji-mart

上記が完了したら、GitHub のサンプルを参考に実装します。
私のコードは下記のとおりです。

import 'emoji-mart/css/emoji-mart.css'
import { Picker } from 'emoji-mart'

this.selectEmoji = emoji => {
  // 絵文字を選択した時の処理を記述
}

<Picker
  onSelect={(emoji) => this.selectEmoji(emoji)}
  title="絵文字を選んでください"
  native
  i18n={{
    search: '検索',
    categories: {
      search: '検索結果',
      recent: 'よく使う絵文字',
      people: '顔 & 人',
      nature: '動物 & 自然',
      foods: '食べ物 & 飲み物',
      activity: 'アクティビティ',
      places: '旅行 & 場所',
      objects: 'オブジェクト',
      symbols: '記号',
      flags: '旗',
      custom: 'カスタム',
    },
  }}
/>

デフォルトでは見出しはすべて英語なのですが、i18n を設定するとこちらを日本語に変更することができます。
また、native を設定すると、Unicode の絵文字が使用されるようになり、こちらの方が表示速度が速いらしいです。
title は、絵文字の上にマウスオーバーしていない時に表示されるテキストで、大体「絵文字を選択してください」や「Pick your emoji…」などの絵文字の選択を促す文言を指定しておけばOKです。

基本的にはこれだけでOKです。
あとは気になるところや、現在のプロジェクトのデザインと合わない所を適宜修正していってください。
個人的には、絵文字が未選択の時に表示される絵文字を変更したいと思っています。

以上、React で絵文字ピッカーを簡単に実装できるライブラリ「emoji-mart」のご紹介でした。
ご参考になれば幸いです。