@reactivekit/emojipicker

This package provides a customizable, easy-to-use emoji picker component for your React applications.

Installation

npm install @reactivekit/emojipicker
# or
pnpm add @reactivekit/emojipicker
# or
yarn add @reactivekit/emojipicker

Usage with Tailwindcss

// Example usage of the EmojiPicker component with tailwindcss
import {
  EmojiPicker,
  EmojiGroupNavigator,
  EmojiViewPanel,
  EmojiSearch,
  SkintonePicker,
} from '@reactivekit/emojipicker';

const EmojiPickerComponent = () => {
  return (
    <div className="p-4 w-80 mx-auto bg-white shadow-lg rounded-lg">
      <EmojiPicker
        onEmojiClick={(emoji) => {
          console.log(emoji);
        }}
      >
        <div className="flex gap-2">
          <EmojiSearch type="text" className="border bg-gray-100 h-8 rounded-lg w-full" />
          <SkintonePicker
            componentProps={{
              trigger: {
                className:
                  'w-8 h-8 grid place-items-center shrink-0 rounded-lg border [&>span]:contents',
              },
              option: { className: 'py-1' },
              item: { className: 'block rounded-lg w-6 h-6 cursor-pointer' },
            }}
          />
        </div>
        <EmojiGroupNavigator
          className="flex py-4 gap-2 justify-evenly"
          componentProps={{
            tab: { className: 'data-[state=active]:text-blue-700 transition-colors' },
            icon: { className: 'w-5 h-5' },
          }}
        />
        <EmojiViewPanel
          className="h-80 overflow-y-auto"
          style={{ scrollbarWidth: 'thin' }}
          componentProps={{
            groupHeading: {
              className: 'text-sm font-bold bg-white bg-opacity-80 px-2 py-1 sticky top-0',
            },
            groupContent: { className: 'grid grid-cols-7 text-2xl' },
            emoji: { className: 'cursor-pointer transition-colors rounded hover:bg-gray-100' },
          }}
        />
      </EmojiPicker>
    </div>
  );
};

Documentation

For more documentation, visit EmojiPicker Docs