FrontendArmory
BlogDemoboardLearning Resources
FrontendArmory
BlogDemoboardLearning Resources

DemoTube: react-emojione

Quickly add emojis to your app

By James K Nelson

Learn about react-emojione – a tiny package by Pedro Ladaria that adds consistent emojis to your React app, with :shortcodes:, unicode and ASCII smilies.

  • emojis are an important tool for expression
  • they make human interaction on the web more human, and give people more control over the tone of a conversation, helping make the experience of online communication more enjoyable for everyone.
  • help overcome language barrier.
  • there’s just one problem: many people don’t have access to an input method that supports emojis
  • to solve this many apps support shortcodes

image: 😉 -> 😉

  • but how do you add shortcodes to your app? one tool that can help is react-emojione, by Pedro Ladaria
  • react-emojione gives you an <Emojify> component that converts shortcodes, unicode emojis, and ascii smilies into a set of emoji sprites provided by emojione.
index.js
index.html
import Emojify from 'react-emojione';

ReactDOM.render(
    <Emojify>
        <span>Easy! :wink:</span>
        <span>😸 :D  ^__^</span>
    </Emojify>,
    document.querySelector('#root')
);
Build In Progress

The <Emojify> component can be configured with a number of props.

index.js
index.html
import Emojify from 'react-emojione';

ReactDOM.render(
    <Emojify
      // Which patterns should be converted into emoji?
      convertShortnames={true}
      convertUnicode={false}
      convertAscii={false}

      // Render emojis as unicode characters instead of sprites
      output='unicode'

      // Applies a style to each emoji. Can be used to set their size.
      style={{fontSize: '64px'}}

      // This handler will be rendered with each Emoji.
      onClick={e => alert(e.target.title)}>
        <span>Easy! :wink:</span>
        <span>I'm a little :teapot:</span>
    </Emojify>,
    document.querySelector('#root')
);
Build In Progress

There’s also a function form available.

index.js
index.html
import { emojify } from 'react-emojione'

ReactDOM.render(
  <div>
      {emojify('Easy! :wink: 😸 :D  ^__^'), { output: 'unicode' }}
  </div>,
  document.querySelector('#root')
);
Build In Progress
  • a few lines conclusion of why this is awesome / useful

About James

Hi! I've been playing with JavaScript for over half my life, and am building Frontend Armory to help share what I've learned along the way!

Tokyo, Japan

Github
jamesknelson