Question 1

How to style emoji-picker-element to match my app?

Accepted Answer

Use CSS variables like --background and --emoji-size for basic changes. For deeper customization, you must inject styles into the shadow DOM using JavaScript, as described in the Styling section, which can be complex for non-web component experts.

Question 2

emoji-picker-element or emoji-mart: which is better?

Accepted Answer

emoji-picker-element is lighter and more memory-efficient due to IndexedDB, ideal for performance-critical apps. emoji-mart offers more pre-built features and easier styling but has a larger bundle size. Choose based on your priority for efficiency vs. out-of-the-box functionality.

Question 3

Can I use emoji-picker-element in a Next.js app?

Accepted Answer

Yes, but you must load it client-side only using dynamic imports or onMount, as it doesn't support server-side rendering and will cause errors like 'requestAnimationFrame is not defined' if imported on the server, per the meta-framework section.

Question 4

How to handle unsupported emoji like flags on Windows?

Accepted Answer

Use the polyfill country-flag-emoji-polyfill or set a custom emoji font with the emoji-version attribute to ensure consistent display. The README provides examples and notes that native emoji support varies by OS.

Question 5

Does emoji-picker-element work offline?

Accepted Answer

Yes, it uses a stale-while-revalidate strategy with IndexedDB, caching data locally after the first load. However, initial offline use requires prior data fetch, and errors occur if the JSON source is unreachable.

Question 6

How to add my own custom emoji to the picker?

Accepted Answer

Pass an array of custom emoji objects with properties like name, shortcodes, and url to the customEmoji property, as shown in the Custom emoji section. These are kept in-memory and don't use IndexedDB.

<emoji-picker>

What is <emoji-picker>?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions