Home

Awesome

react-emoji

Circle CI NPM

An emoji mixin for React

Features

Compatible React Versions

react@0.13.x and react@0.14.x both can be used <= react-emoji@0.4.x.

However, test code depends on react@0.14.x, it's internal though.

Demo

banyan.github.io/react-emoji

Install

npm i react-emoji
# or
bower i react-emoji # `window.ReactEmoji` is available

Usage

let App = React.createClass({
  getDefaultProps() {
    return {
      text: "foo bar :100: :)",
    };
  },

  mixins: [
    ReactEmoji
  ],

  render() {
    return (
      <div>
        <span>{ this.emojify(this.props.text) }</span>
        <span>{ ReactEmoji.emojify(this.props.text) }</span> // or can be used no mixin way
      </div>
    );
  }
});

API

emojify(text, options)

Default options

All options are optional.

PropertiesDescriptionDefaultType
useEmoticonUse emoticon or nottrueBoolean
emojiTypetwemoji or emojione are availabletwemojiString
hostCustom host""String
pathCustom path""String
extasset ext. svg or png are availablesvgString
attributesAttributes such as className or onClick{width: '20px', height: '20px'}Object
singleEmojiShow single emoji (either of annotation or emoticon), use this option if input is limited to render single emoji, this is slightly fasterfalseBoolean
strictThrow an error if annotation is not in dict, it's handy if emoji input is not from end userfalseBoolean

Tips

In tandem with react-autolink.

Development

Dependency

$ npm i

Run

$ npm start # => http://0.0.0.0:8080

Test

$ npm test

License

MIT