Lightweight, Composable Emoji Picker for React – Frimousse

Description:

Frimousse is a React component library that provides a completely unstyled, composable emoji picker.

Built by Liveblocks, it solves the common problem of implementing emoji selection in React applications without imposing design decisions or heavy dependencies.

Features

• ⚡️ Dependency-free: No heavy emoji libraries bundled, uses tree-shaking
• 🎨 Fully unstyled: Complete control over appearance with CSS
• 🔄 Auto-updating: Fetches latest emoji data when needed
• ♿️ Accessible: Keyboard navigation and screen reader support
• 🔣 Clean output: Filters unsupported emojis automatically

Use Cases

• Chat applications needing a performant emoji picker that matches existing UI
• Comment systems requiring accessible emoji selection
• Form inputs where emoji support enhances user experience
• Custom design systems that need complete styling control

Installation and Usage

Basic Setup

npm install frimousse

Basic Implementation

import { EmojiPicker } from "frimousse";
function MyPicker() {
  return (
    <EmojiPicker.Root>
      <EmojiPicker.Search />
      <EmojiPicker.Viewport>
        <EmojiPicker.Loading>Loading…</EmojiPicker.Loading>
        <EmojiPicker.Empty>No emoji found.</EmojiPicker.Empty>
        <EmojiPicker.List />
      </EmojiPicker.Viewport>
    </EmojiPicker.Root>
  );
}

Styling Options

Frimousse provides data attributes for styling:

[frimousse-root] {
  /* Your styles here */
}

Technical Implementation

• Virtualized rendering for performance
• On-demand emoji data fetching via Emojibase
• Component composition pattern for flexibility
• Built with TypeScript and tested with Vitest

The library achieves 95%+ test coverage, including browser tests via Playwright.

FAQs

Q: How does it handle emoji updates?
A: It fetches fresh data periodically and caches locally.

Q: Can I use custom emoji sets?
A: Not directly – it’s designed for standard Unicode emojis.

Q: What’s the bundle size impact?
A: About 12kb gzipped with no additional dependencies.