A tiny library to use emojis in React
Clone or download
Latest commit 72306d1 Dec 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets rename Oct 4, 2017
demo prepare to v3 Oct 4, 2017
scripts generate emojidata with alternate shortnames Oct 13, 2017
src fix backgroundSize Dec 10, 2018
test improve shortnames regex Oct 13, 2017
.babelrc prepare to v3 Oct 4, 2017
.eslintrc.yml prepare to v3 Oct 4, 2017
.gitignore ignore /lib Apr 23, 2017
.npmignore skip assets from publishing Oct 4, 2017
.yarnclean update demo to use React class syntax Apr 8, 2017
README.md update readme Oct 4, 2017
index.js serve from cloudflare by default Apr 8, 2017
package.json 5.0.1 Dec 10, 2018
webpack.config.js add new assets Oct 3, 2017
yarn.lock prepare to v3 Oct 4, 2017

README.md

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