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?
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 = ;var EmojiPicker = ;var emojiMap ;// styles for the emoji picker wrappervar 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
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?
Patching this package to support other emoji flavors would be really easy. If you want to contribute that improvement, pull requests are welcome!
Fork the repo, submit a small pull request. There aren't any tests, yet—if that makes you sad, feel free to add some!