React Emoji Picker

By  on  

When emojis first hit the web scene I rolled my eyes -- they seemed like a lame communication method for giggling kids.  After years more experience working remotely, managing open source communities, and communicating with people that may not get my sense of humor, I've realized that emojis go a long way in representing the tone of comment.  Emojis have a way of bringing levity to any online comment or debate, most notably seen to me on GitHub pull requests and issue comments.

There's an amazing React library out there called Emoji Mart; Emoji Mart is a highly customizable emoji popup widget that allows you to very easily add an emoji UI to any React project!

React Emoji

Let's have a look at a few of the customization options of Emoji Mart:

import 'emoji-mart/css/emoji-mart.css'
import { Picker } from 'emoji-mart'
 
<Picker set='emojione' />
<Picker onSelect={this.addEmoji} />
<Picker title='Pick your emoji…' emoji='point_up' />
<Picker style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
<Picker i18n={{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }} />

Online communities thrive on the ability to communicate effectively, and when you consider language barriers and sense of humor, emojis are no laughing matter.  Emoji Mart is easy to implement and was reliable during all of my testing!

Recent Features

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • By
    Multiple File Upload Input

    More often than not, I find myself wanting to upload more than one file at a time.  Having to use multiple "file" INPUT elements is annoying, slow, and inefficient.  And if I hate them, I can't imagine how annoyed my users would be.  Luckily Safari, Chrome...

  • By
    Image Reflections with CSS

    Image reflection is a great way to subtly spice up an image.  The first method of creating these reflections was baking them right into the images themselves.  Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!