A tiny library to use emojis in React

Dec 12, 2018
A tiny library to use emojis in React


A tiny library to use emojis in React.

View demo Download Source


  • Updated to emojione v3.1.2
  • Dependency free!
  • Can be used as function: emojify() or component: <Emojify>
  • Converts :shortnames:, unicode and ASCII smileys
  • Copy-paste friendly
  • Sprite mode (the only supported mode for now)
  • Configurable styles and options
  • Easy!


npm install --save react-emojione

Development / Run demo

# clone repo git clone ... # get dependencies yarn # start dev-server yarn start

Basic usage (function)

import {emojify} from 'react-emojione'; ReactDOM.render( <div> {emojify('Easy! :wink: ???? :D ^__^')} </div>, document.body );

Basic usage (component)

import Emojify from 'react-emojione'; ReactDOM.render( <Emojify> <span>Easy! :wink:</span> <span>???? :D ^__^</span> </Emojify>, document.body );

Advanced usage (function)

import {emojify} from 'react-emojione'; const options = { convertShortnames: true, convertUnicode: true, convertAscii: true, style: { backgroundImage: 'url("/path/to/your/emojione.sprites.png")', height: 32, margin: 4, }, // this click handler will be set on every emoji onClick: event => alert(event.target.title) }; ReactDOM.render( <div> {emojify('Easy! :wink: ???? :D ^__^', options)} </div>, document.body );

Advanced usage (component)

Simply pass options as props

import Emojify from 'react-emojione'; ReactDOM.render( <Emojify style={{height: 32, width: 32}} onClick={e => alert(e.target.title)}> <span>Easy! :wink:</span> <span>???? :D ^__^</span> </Emojify>, document.body );

Some notes about the <Emojify> component:

  • If it has a single child, it won't be wrapped
  • Otherwise it will be wrapped with a <span>


You can also render to unicode (instead of react elements) using the output option

import {emojify} from 'react-emojione'; emojify('Easy! :wink: :D ^__^', {output: 'unicode'}); // Easy! ???? ???? ????