Бесплатный эмодзи-пикер для веб-приложений: Emoji Mart

Каждый раз когда я пытался добавить эмодзи-реакции в чат или раздел комментариев — упирался в одно и тоже: или писать пикер с нуля (это реально много работы — сотни эмодзи, категории, тон кожи, поиск...), или платить. Нашёл Emoji Mart и поиски на этом закончились.

Сделан командой Missive — они строят продукт для командной переписки, и им самим понадобился хороший пикер. Работает везде: чистый HTML через CDN-ссылку, React, Vue или любой другой фреймворк. Внутри: 9 категорий эмодзи, строка поиска, тёмная и светлая тема, выбор тона кожи, поддержка кастомных наборов. Всё то, чего обычно нет в бесплатных альтернативах которые я пробовал раньше.

1Как добавить эмодзи-пикер на сайт

Самый простой способ — браузерная версия, без сборщиков и пакетных менеджеров вообще. Два скрипт-тега и пикер работает:

<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
<script>
  const picker = new EmojiMart.Picker({
    onEmojiSelect: (emoji) => {
      document.querySelector('#myInput').value += emoji.native
    }
  })
  document.body.appendChild(picker)
</script>

Для React-проектов — три пакета, после чего компонент просто вставляется как обычно. Агент разберётся сам без лишних вопросов:

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

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

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