Emoji Mart: готовый пикер эмодзи для сайта

Когда я делал небольшой чат для одного из своих проектов, поле ввода выглядело совершенно голым. Как буд-то чего-то не хватало — и это сразу бросалось в глаза. У Telegram есть кнопка смайлика, у Slack есть, у Discord есть. Без неё всё выглядит незаконченным даже если технически работает нормально.

Emoji Mart решает именно это. Это бесплатный настраиваемый пикер эмодзи, который работает в любом веб-приложении — React, Vue, обычный HTML, что угодно. Демо живёт по адресу missiveapp.com/open/emoji-mart и выглядит как в любом профессиональном чате. Поиск работает, категории работают, тёмная тема переключается автоматически, выбор оттенка кожи — тоже есть. Больше 9000 звёзд на GitHub и реально используется в продуктах.

Пикер подключается двумя способами — зависит от того, что агент собрал. Если React-приложение, есть готовый компонент который просто вставляется. Если обычная HTML-страница или хочется быстро попробовать — есть браузерная версия: одна строка подключения из CDN, никакой установки вообще. Русский язык поддерживается из коробки, как и ещё 20+ языков.

1Как агент добавляет Emoji Mart

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

<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
<script>
  const picker = new EmojiMart.Picker({ onEmojiSelect: console.log })
  document.body.appendChild(picker)
</script>

2Что сказать агенту

Добавь пикер эмодзи к полю ввода чата с помощью emoji-mart (@emoji-mart/react). Когда пользователь нажимает на иконку смайлика рядом с полем — показывай пикер. При выборе эмодзи — вставляй его в поле ввода в позицию курсора.

Добавь пикер эмодзи к полю ввода сообщений. Загрузи emoji-mart с https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js. При нажатии на кнопку смайлика показывай пикер. Выбранный эмодзи вставляй в текстовое поле.