Flexible Emoji Selectors with React and Tailwind – emoji-picker

Description:

An emoji picker React component taht provides a simple way to add emoji selection functionality to web applications.

Featuress

• 🎨 Unstyled & Composable: Tailwind CSS integration for full customization
• ⚡️ Fast & Lightweight: Virtualized list rendering for smooth scrolling
• 🎯 Accessible: Full keyboard navigation and proper ARIA labeling
• 🌈 Dominant Color Hover: Built-in color effects for supported emojis
• 🔍 Search Functionality: Integrated emoji search capability
• 🖌️ Flexible Styling: Supports multiple pre-built styles (e.g., Slack, Linear)
• 🔧 Configurable: Adjustable emoji size, layout, and Unicode version support

Use Cases

• Adding emoji reactions to comments or messages in a social media app
• Implementing an emoji selector for status updates in team collaboration software
• Creating a custom emoji picker for a rich text editor in a blogging platform
• Enhancing user profiles with emoji-based avatars or tags in a community forum

Preview

How To Use It

Installation:

npm install @ferrucc-io/emoji-picker

Basic Usage:

import { EmojiPicker } from '@ferrucc-io/emoji-picker';
function MyComponent() {
  const handleEmojiSelect = (emoji) => {
    console.log('Selected emoji:', emoji);
  };
  return (
    <EmojiPicker onEmojiSelect={handleEmojiSelect}>
      <EmojiPicker.Header>
        <EmojiPicker.Input placeholder="Search emoji" />
      </EmojiPicker.Header>
      <EmojiPicker.Group>
        <EmojiPicker.List />
      </EmojiPicker.Group>
    </EmojiPicker>
  );
}

Tailwind CSS Configuration:

Add this to your tailwind.config.js:

module.exports = {
  content: [
    // ... other content
    "./node_modules/@ferrucc-io/emoji-picker/dist/**/*.{js,jsx,ts,tsx}",
  ],
  // ... rest of your config
};

Available component props:

• emojisPerRow: Number of emojis per row (default varies)
• emojiSize: Size of each emoji in pixels (default varies)
• containerHeight: Height of the emoji container (default varies)
• maxUnicodeVersion: Maximum Unicode version for emoji inclusion (default: 15.0)
• onEmojiSelect: Callback function when an emoji is selected

FAQS

Q: How does the search functionality work?
A: The search matches emoji names and keywords. It’s case-insensitive and supports partial matching.

Q: Is it possible to add custom emojis?
A: Currently, the component doesn’t support custom emojis out of the box. You’d need to fork and modify the source to add this functionality.

Q: How can I change the skin tone of emojis?
A: The component includes a SkinTone selector in the Slack-style example. You can implement this in your custom layouts.