DOCSEARCHbyAlgolia
Submit Docs

emoji-mart

repository·main·Indexed 27 days ago

https://github.com/missive/emoji-mart

A highly customizable emoji picker component for modern web applications, supporting React and vanilla JavaScript. It includes the @emoji-mart/react wrapper and the @emoji-mart/data package for managing emoji sets, categories, and skin tone variations. Features include custom emojis, custom category icons, and headless search.

Tokens
3.9K
Snippets
8
Records
38
Agent score
93%

What's inside emoji-mart

  4. Use the Picker component in React

    main

    Import the Picker component from @emoji-mart/react and the emoji data from @emoji-mart/data. Pass the data to the data prop and provide an onEmojiSelect callback function to handle emoji selection events.

    import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

function App() {
  return (
    <Picker data={data} onEmojiSelect={console.log} />
  )
}

  8. Retrieve emoji data with getEmojiData

    main

    Use getEmojiData to extract a standardized emoji data object from a raw emoji object. You can specify a skinIndex to retrieve data for a specific skin variant.

    The returned object includes:

    • id: The emoji ID
    • name: The emoji name
    • native: The native emoji character
    • unified: The Unicode unified string
    • keywords: Associated keywords
    • shortcodes: The shortcode for the emoji
    • skin: (Optional) The skin index if multiple skins exist
    • src: (Optional) The image source if available
    • aliases: (Optional) List of aliases
    • emoticons: (Optional) List of emoticons

  9. Understand the EmojiMartData structure

    main

    The EmojiMartData interface defines the top-level structure of the emoji data package. It contains categorized emoji IDs, a lookup map for emoji objects, an alias map for searching, and metadata about the emoji sheet layout.

    export interface EmojiMartData {
  categories: Category[]
  emojis: { [key: string]: Emoji }
  aliases: { [key: string]: string }
  sheet: Sheet
}

  11. Initialize emoji-mart data and i18n

    main

    Use the init function to load emoji data and internationalization (i18n) files before rendering the picker. You can provide data and i18n objects directly, or pass functions that return them (which will be awaited). If no data is provided, the library will attempt to fetch the latest emoji set from a CDN based on the emojiVersion and set props.

    Available configuration options for init include:

    • data: An emoji data object or a function returning a Promise that resolves to an emoji data object.
    • i18n: An i18n object or a function returning a Promise that resolves to an i18n object.
    • emojiVersion: The version of the emoji set to use (defaults to PickerProps.emojiVersion.value).
    • set: The emoji set name (e.g., 'apple', 'google', 'native') (defaults to PickerProps.set.value).
    • locale: The locale string for i18n (e.g., 'en', 'fr').
    • custom: An array of custom category objects to be added to the picker.
    • categories: An array of category IDs to filter the available categories.
    • maxFrequentRows: Number of rows for the 'frequent' category.
    • perLine: Number of emojis per line in the 'frequent' category.
    • categoryIcons: An object mapping category IDs to custom icons.
    • noCountryFlags: Boolean to disable country flags when using the native set.
    • exceptEmojis: An array of emoji IDs to exclude from the picker.