DEPRECATED - use emoji-mart
I, @chadoh, needed this package back in 2015, because nothing else like it existed. Today, emoji-mart is a thing that exists in the world, and there's no reason to keep using this. Go give emoji-mart a shot. You'll love it!
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('react-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 default 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!
