starise / emoji-mart Goto Github PK

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




Brought to you by the Missive team

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:

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 })

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.

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'))

<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>

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.

Coming soon. See examples for now.

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)

yarn install
yarn dev