@emoji-mart/data

What is @emoji-mart/data?

@emoji-mart/data is a comprehensive emoji data package that provides a wide range of emoji-related functionalities. It includes data for all emojis, including their names, categories, and various properties. This package is useful for applications that need to display, search, or categorize emojis.

What are @emoji-mart/data's main functionalities?

Emoji Data Retrieval

This feature allows you to retrieve detailed data for specific emojis using their Unicode or short names.

const emojiData = require('@emoji-mart/data');
console.log(emojiData.emojis['1F600']); // Logs data for the grinning face emoji

Category Listing

This feature provides a list of all emoji categories, which can be useful for organizing or displaying emojis by category.

const emojiData = require('@emoji-mart/data');
console.log(emojiData.categories); // Logs all emoji categories

Search Functionality

This feature allows you to search for emojis based on their names or other properties, making it easier to find specific emojis.

const emojiData = require('@emoji-mart/data');
const searchEmojis = (query) => {
  return Object.values(emojiData.emojis).filter(emoji => emoji.name.includes(query));
};
console.log(searchEmojis('smile')); // Logs all emojis with 'smile' in their name

Other packages similar to @emoji-mart/data

emoji-datasource

emoji-datasource provides a similar set of emoji data, including names, categories, and properties. It is often used in conjunction with other libraries to display and search for emojis. Compared to @emoji-mart/data, it offers a more basic dataset without some of the additional functionalities.

emojibase-data

emojibase-data offers a comprehensive set of emoji data, including support for multiple languages and skin tones. It is more extensive in terms of localization compared to @emoji-mart/data, making it a good choice for applications that need to support multiple languages.

emoji-picker-react

emoji-picker-react is a complete emoji picker component for React applications. It includes emoji data and a user interface for selecting emojis. While it provides similar data to @emoji-mart/data, it also includes a ready-to-use UI component, making it more suitable for React developers.

README

Emoji Mart is a customizable
emoji picker HTML component for the web
Demo




Brought to you by the Missive team

💾 Data

Data required for the picker to work has been completely decoupled from the library. That gives developers the flexibility to better control their app bundle size and let them choose how and when this data is loaded. Data can be:

Bundled directly into your codebase

Pros: Picker renders instantly, data is available offline
Cons: Slower initial page load (bigger file to load)

yarn install @emoji-mart/data

import data from '@emoji-mart/data'
import { Picker } from 'emoji-mart'

new Picker({ data })

Fetched remotely

Pros: Data fetched only when needed, does not affect your app bundle size
Cons: Network latency, doesn’t work offline (unless you configure a ServiceWorker)

import { Picker } from 'emoji-mart'
new Picker({
  data: async () => {
    const response = await fetch(
      'https://cdn.jsdelivr.net/npm/@emoji-mart/data',
    )

    return response.json()
  }
})

In this example data is fetched from a content delivery network, but it could also be fetched from your own domain if you want to host the data.

🧑‍💻 Usage

React

npm install --save emoji-mart @emoji-mart/data

import React, { useEffect, useRef } from 'react'
import { render } from 'react-dom'

import data from '@emoji-mart/data'
import { Picker } from 'emoji-mart'

function EmojiPicker(props) {
  const ref = useRef()

  useEffect(() => {
    new Picker({ ...props, data, ref })
  }, [])

  return <div ref={ref} />
}

render(<EmojiPicker onEmojiSelect={console.log} />, document.querySelector('#picker'))

Browser

<script type="module">
  import data from 'https://cdn.jsdelivr.net/npm/@emoji-mart/data'
  import * as EmojiMart from 'https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/index.js'

  const picker = new EmojiMart.Picker({ data, onEmojiSelect: console.log })
  document.querySelector('#picker').appendChild(picker)
</script>

🗺 Internationalization

EmojiMart UI supports multiple languages, feel free to open a PR if yours is missing.

import i18n from '@emoji-mart/data/i18n/fr.json'
i18n.search_no_results_1 = 'Aucun emoji'

new Picker({ i18n })

Given the small file size, English is built-in and doesn’t need to be provided.

📚 Documentation

Coming soon. See examples for now.

🤓 Built for modern browsers

EmojiMart relies on these APIs, you may need to include polyfills if you need to support older browsers:

• Shadow DOM (MDN)
• Custom elements (MDN)
• IntersectionObserver (MDN)
• Async/Await (MDN)

🛠 Development

yarn install
yarn dev