Home

Awesome

<p align="center"> <img src="https://api.emojione.com/emoji/1f63b/download/128" width=64 /> <img src="https://api.emojione.com/emoji/1f602/download/128" width=64 /> <img src="https://api.emojione.com/emoji/1f9d9-2642/download/128" width=64 /> <img src="https://api.emojione.com/emoji/1f9dc-2640/download/128" width=64 /> <h1 align="center">react-emojione</h1> <p align="center">A tiny library to use emojis in React</p> </p>

Features

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:

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