DEV Community

Cover image for Project Nineteen: Emoji
Valeria
Valeria

Posted on

Project Nineteen: Emoji

πŸŽ„ 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:

Slack emoji keyboard with search bar showing "Smiley and people"

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

  1. User should be able to open and close emoji keyboard
  2. User should be able to see all available emojis
  3. User should be able to search through them
  4. Keyboard should be accessible: i.e. all the labels should be present and navigation should be possible through keyboard

Recipe

  1. Create static layout for emojis table
  2. Add 3-4 emojis
  3. Implement logic of adding selected emoji to a e.g. textarea
  4. Add a search bar
  5. Ensure accessibility
  6. Store all available emojis in an object
  7. Implement search functionality
  8. Add the appear/hide toggle
  9. 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:

Slack input with ":hear" typed and all sorts of heart emojis shown

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?

Buy Me A Coffee

Top comments (0)