Home

Awesome

React Easy Emoji 🎉

react-easy-emoji MIT license on NPM react-easy-emoji on NPM Build Status react-easy-emoji total downloads on NPM react-easy-emoji monthly downloads on NPM

Super minimal emoji rendering utility for React, with built in support for the wonderful twemoji image set.

We use Easy Emoji at Appfigures for rendering millions of review cards.

<a href="https://appfigures.com/reviews/41680810438L1SidPd0I5JBQAxo-L2DlLQ" target="_blank"> <img src="https://raw.githubusercontent.com/appfigures/react-easy-emoji/master/images/review-appfigures.png" width="600" /> </a>

Example

Basic usage

import emoji from 'react-easy-emoji'

emoji('Emojis make me 😀')
// output: ['Emojis make me ', <img src="//twemoji.maxcdn.com/2/72x72/1f604.png" ... />]

Rendering emojis in a component

import emoji from 'react-easy-emoji'

class Page extends React.Component {
	render () {
		return <p>{ emoji('Emojis make me 😀') }</p>
	}
}

Features

What it doesn't do

We've consciously left out some extra features in order to keep this library as minimal as possible:

Installation

npm install --save react-easy-emoji

Common tasks

Using svg Twemoji assets instead of the default png

React Easy Emoji uses png assets from the Twemoji CDN by default. To use svg assets instead you can pass a few extra options:

function svgEmoji (input) {
	return emoji(input, {
		baseUrl: 'https://twemoji.maxcdn.com/2/svg/',
		ext: '.svg',
		size: ''
	})
}

// example output: https://twemoji.maxcdn.com/2/svg/1f600.svg

Using EmojiOne cdn assets instead of Twemoji

While there's only built-in support for Twemoji assets, using assets from other libraries is extremely easy:

function emojiOne(input) {
	return emoji(input, {
		baseUrl: '//cdnjs.cloudflare.com/ajax/libs/emojione/2.2.5/assets/png/',
		size: ''
	})
}

Rendering a custom React element instead of <img>

For full control over how emojis get rendered just provide a function as the second parameter:

function customEmoji (input) {
	return emoji(input, (code, string, key) => (
		<MyEmoji code={ code } alt={ string } key={ key } />
	))
}

API Reference

emoji(string|array[, options|renderFn]) => array

This is the only function in this library. It allows for several different levels of customization

Parameters

input: string | array

The object to be emojified. Can be a simple string or an array which mixes react elements and strings. When an array is processed, all react elements are simply skipped but still get included in the output.

Array input example

emoji(['simple string', <br />, 'string with emoji 🍻'])
// Output: ['simple string', <br />, 'string with emoji ', <img src="//twemoji.maxcdn.com/..." />]

Notice how the first two items in the array remain exactly the same, while the third gets split up.

options : object | renderFn : func

For basic customization pass in an options object to specify how image urls are constructed. The following options are available:

For complete control over the output emoji, pass a function instead of an options object, with the following signature:

(code, string, offset) => element : ReactElement

Params

Return

This function must return a valid React element. Since the output will be placed in an array it must have a key attribute. For more information on why a key attribute is required see the React docs

Example:

emoji(string, (code, string, offset) => {
	return <MyEmoji code={ code } alt={ string } key={ offset } />
})

Inspiration

While building Appfigures Review Cards we needed a simple emoji rendering library for React. We found several but none of them checked all of our boxes. The idealist in us wanted a library that doesn't pack any unnecessary features, doesn't manipulate the DOM, and has a functional API that does things the React way™. So with a little inspiration from this thread we decided to roll our own.

Other React emoji libraries