🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A tiny ES6 library to use emojione’s emojis in React applications.

Featured React Text

Documentation

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

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


You May Also Like