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:<Emojify> - Converts :shortnames:, unicode and ASCII smileys
- Copy-paste friendly
- Sprite mode (the only supported mode for now)
- Configurable styles and options
- Easy!
Demo
Install
npm install --save react-emojioneDevelopment / Run demo
# clone repo git clone ... # get dependencies yarn # start dev-server yarn startBasic 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
