emoji-mart vs react-emoji-render
Emoji Handling in React
Search packages..
emoji-martreact-emoji-render
Emoji Handling in React

Emoji handling libraries in React provide developers with tools to easily integrate and manage emojis within their applications. These libraries offer features such as emoji pickers, rendering emojis from text, and customizing emoji styles. They help enhance user experience by making it simple to include emojis in chat applications, social media platforms, and other interactive web applications. emoji-mart is a comprehensive emoji picker library that offers a wide range of emojis, customizable styles, and a user-friendly interface. It is ideal for applications that require a full-featured emoji picker with search and category support. react-emoji-render is a lightweight library focused on rendering emojis from text, supporting various emoji formats such as Unicode, shortcodes, and images. It is perfect for applications that need to display emojis within text content without the overhead of a full picker.

Npm Package Weekly Downloads Trend
3 Years
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
emoji-mart973,0779,2511.63 MB2112 years agoMIT
react-emoji-render20,320337140 kB143 years agoMIT
Feature Comparison: emoji-mart vs react-emoji-render

Emoji Selection

  • emoji-mart:

    emoji-mart provides a comprehensive emoji picker with a wide range of emojis organized into categories. It includes features like search, recent emojis, and customizable categories, making it easy for users to find and select the emojis they want.

  • react-emoji-render:

    react-emoji-render does not provide an emoji picker. Instead, it focuses on rendering emojis from text, supporting multiple formats such as Unicode, shortcodes, and images. It is designed for displaying emojis rather than selecting them.

Customization

  • emoji-mart:

    emoji-mart allows extensive customization of the emoji picker’s appearance, including colors, fonts, and layout. Developers can also customize the emoji data, add their own emojis, and modify the picker’s behavior to better fit their application’s design and requirements.

  • react-emoji-render:

    react-emoji-render offers limited customization, primarily focused on how emojis are rendered within text. Developers can choose between different rendering methods (e.g., native, image-based) and customize the styles of the rendered emojis, but it does not offer the same level of customization as emoji-mart.

Performance

  • emoji-mart:

    emoji-mart is a feature-rich library, which means it has a larger footprint compared to simpler emoji libraries. However, it is optimized for performance, and its modular design allows developers to import only the parts they need, helping to minimize the impact on application load times.

  • react-emoji-render:

    react-emoji-render is lightweight and designed for performance, making it a good choice for applications that need to render emojis quickly without adding significant overhead. Its focus on rendering rather than selection means it has a smaller footprint and faster load times.

Integration

  • emoji-mart:

    emoji-mart integrates well with React applications and provides a simple API for embedding the emoji picker. It also supports controlled and uncontrolled modes, allowing developers to manage the picker’s state as needed. The library is compatible with popular styling solutions, making it easy to integrate into existing projects.

  • react-emoji-render:

    react-emoji-render is easy to integrate into React applications, with a straightforward API for rendering emojis from text. It supports various emoji formats and can be used alongside other libraries without conflicts. Its simplicity makes it a good choice for projects that need quick and easy emoji rendering.

Ease of Use: Code Examples

  • emoji-mart:

    Emoji Picker with emoji-mart

    import { Picker } from 'emoji-mart';
import 'emoji-mart/css/emoji-mart.css';

function EmojiPicker() {
  const handleSelect = (emoji) => {
    console.log('Selected emoji:', emoji);
  };

  return <Picker onSelect={handleSelect} />;
}
  • react-emoji-render:

    Rendering Emojis with react-emoji-render

    import { Emoji } from 'react-emoji-render';

function EmojiRenderer() {
  return <Emoji text='Hello :smile:' />;
}
How to Choose: emoji-mart vs react-emoji-render
  • emoji-mart:

    Choose emoji-mart if you need a feature-rich emoji picker with extensive customization options. It is suitable for applications where users need to select emojis from a visually appealing interface, complete with categories, search functionality, and the ability to customize the picker’s appearance.

  • react-emoji-render:

    Choose react-emoji-render if you only need to render emojis within text content without the need for a picker. It is lightweight and easy to use, making it ideal for applications that want to display emojis from various formats (Unicode, shortcodes, images) without adding significant bloat.

Similar Npm Packages to emoji-mart

emoji-mart is a popular emoji picker component for React applications. It provides a user-friendly interface for selecting and inserting emojis into text inputs or other components. With a customizable design and a wide range of emojis, emoji-mart makes it easy for developers to enhance user interactions by allowing them to express emotions and ideas visually. Its features include search functionality, categories, and the ability to customize the emoji set, making it a versatile choice for applications that require emoji support.

An alternative to emoji-mart is react-emoji-render. This library focuses on rendering emojis from text strings rather than providing a full emoji picker interface. It allows developers to easily convert emoji shortcodes (like :smile:) into their corresponding emoji characters within React components. If your application requires simple emoji rendering without the need for a dedicated emoji picker, react-emoji-render is a lightweight and straightforward solution.

For a detailed comparison of these two packages, check out the link: Comparing emoji-mart vs react-emoji-render.

Similar Npm Packages to react-emoji-render

react-emoji-render is a React component library that allows developers to easily render emojis in their applications. It provides a simple and efficient way to display emojis using either shortcodes or Unicode characters. This library is particularly useful for chat applications, social media platforms, or any user interface that benefits from the inclusion of emojis to enhance communication and expression.

While react-emoji-render is a great choice for rendering emojis, there are alternatives available that offer additional features or different approaches. One notable alternative is:

  • emoji-mart, which is a customizable emoji picker component for React. It provides a user-friendly interface for selecting emojis, making it ideal for applications that require users to choose emojis from a wide variety. With emoji-mart, developers can easily integrate an emoji picker into their applications, complete with search functionality, categories, and customizable styles. This library is particularly useful for applications where user input is needed, such as messaging apps or comment sections.

For a detailed comparison of these two packages, check out the following link: Comparing emoji-mart vs react-emoji-render.

README for emoji-mart

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

EmojiMart

Missive | Team email, team chat, team tasks, one app
Brought to you by the Missive team

📖 Table of Contents

💾 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 add @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.

🏪 Picker

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

Browser

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

  document.body.appendChild(picker)
</script>

Options / Props

OptionDefaultChoicesDescription
data{}Data to use for the picker
i18n{}Localization data to use for the picker
categories[]frequent, people, nature, foods, activity, places, objects, symbols, flagsCategories to show in the picker. Order is respected.
custom[]Custom emojis
onEmojiSelectnullCallback when an emoji is selected
onClickOutsidenullCallback when a click outside of the picker happens
onAddCustomEmojinullCallback when the Add custom emoji button is clicked. The button will only be displayed if this callback is provided. It is displayed when search returns no results.
autoFocusfalseWhether the picker should automatically focus on the search input
categoryIcons{}Custom category icons
dynamicWidthfalseWhether the picker should calculate perLine dynamically based on the width of <em-emoji-picker>. When enabled, perLine is ignored
emojiButtonColors[]i.e. #f00, pink, rgba(155,223,88,.7)An array of color that affects the hover background color
emojiButtonRadius100%i.e. 6px, 1em, 100%The radius of the emoji buttons
emojiButtonSize36The size of the emoji buttons
emojiSize24The size of the emojis (inside the buttons)
emojiVersion141, 2, 3, 4, 5, 11, 12, 12.1, 13, 13.1, 14The version of the emoji data to use. Latest version supported in @emoji-mart/data is currently 14
exceptEmojis[]List of emoji IDs that will be excluded from the picker
iconsautoauto, outline, solidThe type of icons to use for the picker. outline with light theme and solid with dark theme.
localeenen, ar, be, cs, de, es, fa, fi, fr, hi, it, ja, ko, nl, pl, pt, ru, sa, tr, uk, vi, zhThe locale to use for the picker
maxFrequentRows4The maximum number of frequent rows to show. 0 will disable frequent category
navPositiontoptop, bottom, noneThe position of the navigation bar
noCountryFlagsfalseWhether to show country flags or not. If not provided, tbhis is handled automatically (Windows doesn’t support country flags)
noResultsEmojicryThe id of the emoji to use for the no results emoji
perLine9The number of emojis to show per line
previewEmojipoint_upThe id of the emoji to use for the preview when not hovering any emoji. point_up when preview position is bottom and point_down when preview position is top.
previewPositionbottomtop, bottom, noneThe position of the preview
searchPositionstickysticky, static, noneThe position of the search input
setnativenative, apple, facebook, google, twitterThe set of emojis to use for the picker. native being the most performant, others rely on spritesheets.
skin11, 2, 3, 4, 5, 6The emojis skin tone
skinTonePositionpreviewpreview, search, noneThe position of the skin tone selector
themeautoauto, light, darkThe color theme of the picker
getSpritesheetURLnullA function that returns the URL of the spritesheet to use for the picker. It should be compatible with the data provided.

Custom emojis

You can use custom emojis by providing an array of categories and their emojis. Emojis also support multiple skin tones and can be GIFs or SVGs.

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

const custom = [
  {
    id: 'github',
    name: 'GitHub',
    emojis: [
      {
        id: 'octocat',
        name: 'Octocat',
        keywords: ['github'],
        skins: [{ src: './octocat.png' }],
      },
      {
        id: 'shipit',
        name: 'Squirrel',
        keywords: ['github'],
        skins: [
          { src: './shipit-1.png' }, { src: './shipit-2.png' }, { src: './shipit-3.png' },
          { src: './shipit-4.png' }, { src: './shipit-5.png' }, { src: './shipit-6.png' },
        ],
      },
    ],
  },
  {
    id: 'gifs',
    name: 'GIFs',
    emojis: [
      {
        id: 'party_parrot',
        name: 'Party Parrot',
        keywords: ['dance', 'dancing'],
        skins: [{ src: './party_parrot.gif' }],
      },
    ],
  },
]

function App() {
  return (
    <Picker data={data} custom={custom} />
  )
}

Custom category icons

You can use custom category icons by providing an object with the category name as key and the icon as value. Currently supported formats are svg string and src. See example.

const customCategoryIcons = {
  categoryIcons: {
    activity: {
      svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M57.89 397.2c-6.262-8.616-16.02-13.19-25.92-13.19c-23.33 0-31.98 20.68-31.98 32.03c0 6.522 1.987 13.1 6.115 18.78l46.52 64C58.89 507.4 68.64 512 78.55 512c23.29 0 31.97-20.66 31.97-32.03c0-6.522-1.988-13.1-6.115-18.78L57.89 397.2zM496.1 352c-44.13 0-79.72 35.75-79.72 80s35.59 80 79.72 80s79.91-35.75 79.91-80S540.2 352 496.1 352zM640 99.38c0-13.61-4.133-27.34-12.72-39.2l-23.63-32.5c-13.44-18.5-33.77-27.68-54.12-27.68c-13.89 0-27.79 4.281-39.51 12.8L307.8 159.7C262.2 192.8 220.4 230.9 183.4 273.4c-24.22 27.88-59.18 63.99-103.5 99.63l56.34 77.52c53.79-35.39 99.15-55.3 127.1-67.27c51.88-22 101.3-49.87 146.9-82.1l202.3-146.7C630.5 140.4 640 120 640 99.38z"/></svg>',
    },
    people: {
      src: './people.png',
    },
  },
}

🙃 Emoji component

The emoji web component usage is the same no matter what library you use.

First, you need to make sure data has been initialized. You need to call this only once per page load. Note that if you call init like this, you don’t necessarily need to include data in your Picker props. It doesn’t hurt either, it will noop.

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

init({ data })

Then you can use the emoji component in your HTML / JSX.

<em-emoji id="+1" size="2em"></em-emoji>
<em-emoji id="+1" skin="2"></em-emoji>
<em-emoji shortcodes=":+1::skin-tone-1:"></em-emoji>
<em-emoji shortcodes=":+1::skin-tone-2:"></em-emoji>

Attributes / Props

AttributeExampleDescription
id+1An emoji ID
shortcodes:+1::skin-tone-2:An emoji shortcode
native👍A native emoji
size2emThe inline element size
fallback:shrug:A string to be rendered in case the emoji can’t be found
setnativeThe emoji set: native, apple, facebook, google, twitter
skin1The emoji skin tone: 1, 2, 3, 4, 5, 6

🕵️‍♀️ Headless search

You can search without the Picker. Just like the emoji component, data needs to be initialized first in order to use the search index.

import data from '@emoji-mart/data'
import { init, SearchIndex } from 'emoji-mart'

init({ data })

async function search(value) {
  const emojis = await SearchIndex.search(value)
  const results = emojis.map((emoji) => {
    return emoji.skins[0].native
  })

  console.log(results)
}

search('christmas') // => ['🎄', '🇨🇽', '🧑‍🎄', '🔔', '🤶', '🎁', '☃️', '❄️', '🎅', '⛄']

🔬 Get emoji data from native

You can get emoji data from a native emoji. This is useful if you want to get the emoji ID from a native emoji. Just like the emoji component, data needs to be initialized first in order to retrieve the emoji data.

import data from '@emoji-mart/data'
import { init, getEmojiDataFromNative } from 'emoji-mart'

init({ data })

getEmojiDataFromNative('🤞🏿').then(console.log)
/* {
  aliases: ['hand_with_index_and_middle_fingers_crossed'],
  id: 'crossed_fingers',
  keywords: ['hand', 'with', 'index', 'and', 'middle', 'good', 'lucky'],
  name: 'Crossed Fingers',
  native: '🤞🏿',
  shortcodes: ':crossed_fingers::skin-tone-6:',
  skin: 6,
  unified: '1f91e-1f3ff',
} */

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

📚 Examples

🤓 Built for modern browsers

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

🛠 Development

yarn install
yarn dev
npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.