【emoji-picker-react】Reactions Pickerを実装する方法

実装方法

Reactions Pickerを使用するには、reactionsDefaultOpenプロップをtrueに設定します。

import Picker from 'emoji-picker-react';

function App() {
  const handleReaction = (emojiData) => {
    console.log('Selected emoji:', emojiData);
  };

  return (
    <Picker 
      reactionsDefaultOpen={true}
      onReactionClick={handleReaction}
    />
  );
}

Reactions Pickerのカスタマイズ

表示するReactions Pickerに表示される絵文字をカスタマイズするには、reactionsプロップにunified emoji IDの配列を渡します。

<Picker 
  reactionsDefaultOpen={true}
  onReactionClick={handleReaction}
  reactions={['1f44d', '2764-fe0f', '1f389', '1f440', '1f914']}
/>

この例では、👍❤️🎉👀🤔 の5つの絵文字がリアクションとして表示されます。

参考