Features

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

Demo

Live demo

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! 😉 😃 😄

License

MIT

Emoji provided free by http://emojione.com