react-emojione

A tiny library to use emojis in React

Features

- Updated to emojione v3.1.2
- Dependency free!
- Can be used as function: emojify() or component:
- 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

``javascript
npm install --save react-emojione
`

Development / Run demo

`bash


clone repo

git clone ...

get dependencies

yarn

start dev-server

yarn start
`

Basic usage (function)

`javascript
import {emojify} from 'react-emojione';

ReactDOM.render(


,
document.body
);
`

Basic usage (component)

`javascript
import Emojify from 'react-emojione';

ReactDOM.render(

Easy! :wink:
😸 :D ^__^
,
document.body
);
`

Advanced usage (function)

`javascript
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(


,
document.body
);
`

Advanced usage (component)

Simply pass options as props

`javascript
import Emojify from 'react-emojione';

ReactDOM.render(
alert(e.target.title)}>
Easy! :wink:
😸 :D ^__^
,
document.body
);
`
Some notes about the component:
- If it has a single child, it won't be wrapped
- Otherwise it will be wrapped with a

Output

You can also render to unicode (instead of react elements) using the output option
`javascript
import {emojify} from 'react-emojione';

emojify('Easy! :wink: :D ^__^', {output: 'unicode'});
// Easy! 😉 😃 😄
``

License

MIT

---
Emoji provided free by http://emojione.com