react-emojione

    5.0.1 • Public • Published

    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

    Install

    npm i react-emojione

    DownloadsWeekly Downloads

    2,329

    Version

    5.0.1

    License

    MIT

    Unpacked Size

    17.5 MB

    Total Files

    8018

    Last publish

    Collaborators

    • pladaria