@tleunen/react-emoji-picker

react-emoji-picker

Thanks to the awesome work of @banyan on react-emoji, it's easy to turn user-generated boring-old plain text like :laughing: into super sweet emojis like

But how do you introduce emoji n00bs to this brave new world of named emojis?

With react-emoji-picker!

react-emoji-picker allows you to create a very customizable Slack-like emoji picker in your own user interfaces. It looks a little something like this:

How to use

If you want an emoji picker that looks like the above, first install this package using npm i -S react-emoji-picker, and then here's some code you can write to get you to a good starting point:

var React = require('react');
var EmojiPicker = require('emoji-picker');
var emojiMap require('react-emoji-picker/lib/emojiMap');

// styles for the emoji picker wrapper
var emojiPickerStyles = {
  position: 'absolute',
  left: 0, top: '3.9rem',
  backgroundColor: 'white',
  width: '100%',
  padding: '.3em .6em',
  border: '1px solid #0074d9',
  borderTop: 'none',
  zIndex: '2'
};

var MyEmojiInput = React.createClass({
  getInitialState: function() {
    return {
      emoji: null,
      showEmojiPicker: false,
    }
  },

  componentDidMount: function() {
    document.addEventListener('click', this.toggleEmojiPicker, false)
  },

  componentWillUnmount: function() {
    document.removeEventListener('click', this.toggleEmojiPicker, false)
  },

  toggleEmojiPicker: function(e) {
    if(this.refs.emoji.contains(e.target)) {
      this.setState({showEmojiPicker: true});
    } else {
      setTimeout(this.validateEmoji, 10)
      this.setState({showEmojiPicker: false});
    }
  },

  validateEmoji: function() {
    var matched = emojiMap.filter(function(emoji) {
      return `:${emoji.name}:` === this.state.emoji
    })

    if(matched.length === 0) {
      this.setState({emoji: null})
    }
  }

  updateState: function(e) {
    this.setState({emoji: e.target.value})
  },

  setEmoji: function(emoji) {
    this.setState({emoji: emoji})
  },

  // allows selecting first emoji by pressing "Enter" without submitting form
  grabKeyPress: function(e) {
    if(e.keyCode === 13) {
      e.preventDefault()
    }
  },

  emojiPicker: function() {
    if(this.state.showEmojiPicker) {
      return (
        <EmojiPicker
          style={emojiPickerStyles} onSelect={this.setEmoji}
          query={this.state.emoji}
        />
      )
    }
  },

  render: function() {
    return (
      <p ref="emoji">
        <label htmlFor="emoji">Emoji</label>
        <input name="emoji" id="emoji" value={this.state.emoji} autoComplete="off"
          type={this.state.showEmojiPicker ? "search" : "text"}
          onChange={this.updateState} onKeyDown={this.grabKeyPress}/>
        {this.emojiPicker()}
      </p>
    )
  }
})

export.defaults = MyEmojiInput

Phew! That was a lot of stuff!

Why doesn't it do a bunch of that for me?

You're right, it could! But the above code will give you an <input type="text"/> that only accepts a single emoji as a valid value. That's probably not what you want! But react-emoji-picker is flexible enough to support whatever sort of emoji-picking experience you want to build.

Basically, react-emoji-picker takes care of actually listing out all the emojis and responding when a user clicks them. Plus, it keeps the list of all emojis up-to-date in a community-supported way.

What emojis does it support?

Right now, it only supports twemoji. However, it's built with react-emoji, which also supports emojione, or even your own custom emoji set.

Patching this package to support other emoji flavors would be really easy. If you want to contribute that improvement, pull requests are welcome!

Contributing

Fork the repo, submit a small pull request. There aren't any tests, yet—if that makes you sad, feel free to add some!