🎄 Ho-ho-ho! Christmas is almost there and I hope you're all ready to spread the holiday cheer 🎉
Which in written form wouldn't be possible without emojis!😍
Oh, those little pictures can make or break a relationship! A plain message without them sounds very serious and in some cases even angry 😅
Any more or less informal communication pretty much requires emojis - comments, posts, messages - you name it.
So what do you say about implementing an emoji keyboard and diving a bit into unicode symbols?
Emoji Keyboard: requirements and recipe
As a user I want to be access a table of available emojis so that I would be able to quickly pick and use one
The best example I can think of is Slack's implementation:
Of course, you don't need to neither support all the features it has nor limit yourself, as long as the keyboard meets the requirements:
Requirements
- User should be able to open and close emoji keyboard
- User should be able to see all available emojis
- User should be able to search through them
- Keyboard should be accessible: i.e. all the labels should be present and navigation should be possible through keyboard
Recipe
- Create static layout for emojis table
- Add 3-4 emojis
- Implement logic of adding selected emoji to a e.g. textarea
- Add a search bar
- Ensure accessibility
- Store all available emojis in an object
- Implement search functionality
- Add the appear/hide toggle
- Enjoy 🤩
Hints
You can find all emojis, their names and codes in various unicode lists.
You can use Object.keys
to get all available keys from a record to search by prefix or using a more complicated algorithm like soundex.
Hard Mode: Emoji Shortcodes
Slack, Github, Dev.to and plenty other services also allow users to type a special code for an emoji, e.g. :star:
would turn into a "⭐".
I find this feature very useful! Much faster than using a full blown keyboard:
Not to mention that such renderer can be extended to support custom emojis 😎
Share your creations and feedback and see you tomorrow!
Liked the idea a lot and would love to have it all year long?
Top comments (0)