【emoji-picker-react】絵文字ピッカーを実装する方法

インストール

npm install emoji-picker-react

基本的な使い方

最もシンプルな実装は以下の通りです。

import EmojiPicker from 'emoji-picker-react';

function App() {
  return (
    <div>
      <EmojiPicker />
    </div>
  );
}

クリックイベントの処理

絵文字がクリックされた時の処理を追加する場合は onEmojiClick を使用します。

import EmojiPicker from 'emoji-picker-react';

function App() {
  const handleEmojiClick = (emojiData) => {
    console.log(emojiData.emoji); // 選択された絵文字
  };

  return (
    <div>
      <EmojiPicker onEmojiClick={handleEmojiClick} />
    </div>
  );
}

主要なProps

Prop	型	デフォルト	説明
theme	string	light	テーマ (light, dark, auto)
emojiStyle	string	apple	絵文字スタイル (google, apple, facebook, twitter, native)
width	number/string	350	ピッカーの幅
height	number/string	450	ピッカーの高さ
searchPlaceholder	string	Search	検索バーのプレースホルダー
autoFocusSearch	boolean	true	検索入力の自動フォーカス

カスタマイズ例

import EmojiPicker from 'emoji-picker-react';

function App() {
  return (
    <div>
      <EmojiPicker 
        onEmojiClick={handleEmojiClick}
        theme="dark"
        emojiStyle="native"
        width={400}
        height={500}
        searchPlaceholder="絵文字を検索..."
      />
    </div>
  );
}

Next.jsでの使用

Next.jsではサーバーサイドレンダリングのエラーを避けるため、動的インポートを使用します。

import dynamic from 'next/dynamic';

const Picker = dynamic(
  () => import('emoji-picker-react'),
  { ssr: false }
);

function App() {
  return <Picker onEmojiClick={handleEmojiClick} />;
}

絵文字を表示する

選択した絵文字をアプリ内で表示するには Emoji コンポーネントを使用します。

import { Emoji } from 'emoji-picker-react';

function App() {
  return (
    <p>
      お気に入りの絵文字: <Emoji unified="1f423" size={25} />
    </p>
  );
}