React Emoji Picker

Common errors

• TypeError: (0, _emojiPickerReact.default) is not a function OR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

  cause Incorrect import statement for the EmojiPicker component, typically trying to use a named import for a default export, or a CommonJS require in an ESM context.
  fix Ensure you are using the default import: `import EmojiPicker from 'emoji-picker-react';`

• Module not found: Can't resolve 'emoji-picker-react'

  cause The package is not installed or the package name is misspelled.
  fix Install the package: `npm install emoji-picker-react` or `yarn add emoji-picker-react`.

• Peer dependency 'react@>=16' not met.

  cause Your project's React version does not meet the minimum requirement, or React is not installed.
  fix Ensure your project has `react` and `react-dom` installed and updated to version 16 or higher. E.g., `npm install react react-dom` or `yarn add react react-dom`.

• Custom styling applied via props (e.g., `width`, `height`, `pickerStyle`) is not working after upgrading.

  cause Major versions (v2.0.0 and v4.0.0) significantly changed the styling mechanism, removing many direct styling props in favor of SASS/CSS variables.
  fix For v4.x, migrate your custom styles to use CSS variables. For v2.x-v3.x, use SASS variables. Refer to the specific major version's documentation for styling customization.

Warnings

• breaking Version 4.0.0 introduced significant breaking changes. Direct customization props were removed, and styling is now primarily handled via CSS variables. Users upgrading from v3 or earlier must refactor their styling.
  Fix: Review the v4 documentation for styling via CSS variables and the new prop API. Remove deprecated styling props.
• breaking Version 2.0.0 was a major redesign. It updated the UI, removed many customization props, and moved styling to SASS variables. Users upgrading from v1.x need to adjust their styling and prop usage.
  Fix: Consult the v2 documentation for styling and prop changes. Migrate custom styles to SASS variables if targeting v2.x.
• gotcha In versions prior to 2.0.2 and 1.7.2, clicking an emoji could add a '#!' to the URL, causing unexpected re-renders in applications using client-side routing like React Router.
  Fix: Upgrade to version 2.0.2 or newer, or 1.7.2 or newer, as this issue was addressed with a `preventDefault` handler.

Install

• npm install emoji-picker-react npm
• yarn add emoji-picker-react yarn
• pnpm add emoji-picker-react pnpm

Imports

• EmojiPicker
  wrong:

  import { EmojiPicker } from 'emoji-picker-react';
  const EmojiPicker = require('emoji-picker-react');

  correct:

  import EmojiPicker from 'emoji-picker-react';

  EmojiPicker is a default export, so use 'import EmojiPicker from ...' for ESM. CommonJS 'require' pattern is generally discouraged in modern React projects.
• Theme

  import { Theme } from 'emoji-picker-react';

  Used for controlling the picker's visual theme (LIGHT, DARK, AUTO).
• EmojiStyle

  import { EmojiStyle } from 'emoji-picker-react';

  Used for selecting the visual style of emojis (APPLE, GOOGLE, FACEBOOK, TWITTER, NATIVE).
• EmojiClickData

  import { EmojiClickData } from 'emoji-picker-react';

  TypeScript type for the object returned by the onEmojiClick callback.

Quickstart

This example demonstrates how to render the EmojiPicker component, handle emoji selection, toggle its visibility, and customize its appearance with theme and emoji style options.

import React, { useState } from 'react';
import EmojiPicker, { EmojiClickData, Theme, EmojiStyle } from 'emoji-picker-react';

function App() {
  const [selectedEmoji, setSelectedEmoji] = useState<string>('');
  const [showPicker, setShowPicker] = useState<boolean>(false);

  const onEmojiClick = (emojiObject: EmojiClickData, event: MouseEvent) => {
    setSelectedEmoji(emojiObject.emoji);
    setShowPicker(false); // Close picker after selection
    console.log("Selected emoji data:", emojiObject);
    console.log("Event:", event);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }}>
      <h1>Emoji Picker React Example</h1>
      <button onClick={() => setShowPicker(!showPicker)} style={{ marginBottom: '20px', padding: '10px 20px' }}>
        {showPicker ? 'Hide Emoji Picker' : 'Show Emoji Picker'}
      </button>
      {selectedEmoji && <p style={{ fontSize: '2em' }}>You selected: {selectedEmoji}</p>}

      {showPicker && (
        <EmojiPicker
          onEmojiClick={onEmojiClick}
          theme={Theme.AUTO} // Use auto theme based on system preference
          emojiStyle={EmojiStyle.APPLE} // Prefer Apple style emojis
          lazyLoadEmojis={true} // Load emojis on scroll
          autoFocusSearch={true}
          width="100%"
          height={400}
        />
      )}
    </div>
  );
}

export default App;