Giter Club home page Giter Club logo

react-emojione's Introduction

react-emojione

A tiny ES6 library to use emojis in React

Features

  • Converts :shortnames:, unicode and ASCII smileys
  • Copy-paste friendly
  • Use it as a library or mixin
  • No dangerouslySetInnerHTML
  • Inline styles
  • Sprite mode (the only supported mode for now)
  • Configurable styles and options
  • Fast!

Install

npm install --save react-emojione

Run demo

# clone repo and then
npm install
npm run dev-server
# open http://localhost:8080/

Basic usage

import {emojify} from 'react-emojione';

ReactDOM.render(
    <div>
        {emojify('Easy! :wink: ๐Ÿ˜ธ :D  ^__^')}
    </div>,
    document.body
);

Advanced

import {emojify} from 'react-emojione';

const options = {
    convertShortnames: true,
    convertUnicode: true,
    convertAscii: true,
    styles: {
        backgroundImage: 'url(emojione.sprites.png)',
        width: '32px',
        height: '32px',
        margin: '4px'
    },
    // this click handler will be set on every emoji
    handleClick: event => alert(event.target.title)
};

ReactDOM.render(
    <div>
        {emojify('Easy! :wink: ๐Ÿ˜ธ :D ^__^', options)}
    </div>,
    document.body
);

Output

You can also render to unicode (instead of virtualdom) using the output option

import {emojify} from 'react-emojione';

emojify('Easy! :wink: :D ^__^', {output: 'unicode'});
// Easy! ๐Ÿ˜‰ ๐Ÿ˜ƒ ๐Ÿ˜„

License

MIT

react-emojione's People

Contributors

pladaria avatar atabel avatar zalmoxisus avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.