https://github.com/pladaria/react-emojione

A tiny library to use emojis in React
https://github.com/pladaria/react-emojione

Last synced: about 1 month ago
JSON representation

A tiny library to use emojis in React

• Host: GitHub
• URL: https://github.com/pladaria/react-emojione
• Owner: pladaria
• Archived: true
• Created: 2015-11-14T23:30:24.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2020-11-05T19:01:22.000Z (about 4 years ago)
• Last Synced: 2024-11-20T18:51:25.806Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 47.5 MB
• Stars: 186
• Watchers: 4
• Forks: 32
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    

    

    

    

    
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: ``

- 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](https://runkit.com/pladaria/react-emojione)

## Install

```javascript

npm install --save react-emojione

```

## Development / Run demo

```bash

# clone repo

git clone ...

# get dependencies

yarn

# start dev-server

yarn start

```

## Basic usage (function)

```javascript

import {emojify} from 'react-emojione';

ReactDOM.render(

    


        {emojify('Easy! :wink: 😸 :D  ^__^')}

    
,

    document.body

);

```


## Basic usage (component)

```javascript

import Emojify from 'react-emojione';

ReactDOM.render(

    

        Easy! :wink:

        😸 :D  ^__^

    ,

    document.body

);

```

## Advanced usage (function)

```javascript

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(

    


        {emojify('Easy! :wink: 😸 :D ^__^', options)}

    
,

    document.body

);

```


## Advanced usage (component)

Simply pass options as props

```javascript

import Emojify from 'react-emojione';

ReactDOM.render(

     alert(e.target.title)}>

        Easy! :wink:

        😸 :D  ^__^

    ,

    document.body

);

```

Some notes about the `` component:

- If it has a single child, it won't be wrapped

- Otherwise it will be wrapped with a ``

## Output

You can also render to unicode (instead of react elements) using the `output` option

```javascript

import {emojify} from 'react-emojione';

emojify('Easy! :wink: :D ^__^', {output: 'unicode'});

// Easy! 😉 😃 😄

```

## License

MIT

---

Emoji provided free by [http://emojione.com](http://emojione.com)