A tiny library to use emojis in React

by React

react-emojione

A tiny library to use emojis in React.

View demo Download Source

Features

  • 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!

Install

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>

Output

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! ? ? ?

GitHub