joeattardi/picmo

JavaScript emoji picker. Any app, any framework.

PicMo

Add a fully featured emoji picker to your app with a few lines of code!

Formerly known as Emoji Button.

Features at a glance

• It's just JavaScript, no frameworks or libraries required. This means you can use it in any app under any framework.
• Emoji data is loaded once from a CDN and cached in the browser for subsequent sessions.
• Use the default operating system emoji images or use an alternative renderer to use, for example, images from Twemoji.
• Emojis are searchable by name or tags
• Full support for skin tone variations where applicable
• Remembers recently used emojis
• Fully keyboard accessible
• Includes light and dark themes, with the ability to extend them to create your own
• Add custom images and GIFs!
• Render inline on the page or as a popup

Demos and documentation

Demos and full documentation, including the API and usage guide, is available at https://picmojs.com.

Installation

At a minimum, you need the core picker package. This gives you a picker that you can insert inline into an element on the page.

npm install picmo

Basic usage

import { createPicker } from 'picmo';

// The picker must have a root element to insert itself into
const rootElement = document.querySelector('#pickerContainer');

// Create the picker
const picker = createPicker({ rootElement });

// The picker emits an event when an emoji is selected. Do with it as you will!
picker.addEventListener('emoji:select', event => {
  console.log('Emoji selected:', event.emoji);
});

Packages

PicMo is made up of three packages:

• picmo: The core package that you use to create the picker.
• @picmo/popup-picker: Adds the ability to create a popup picker.
• @picmo/renderer-twemoji: Adds support for rendering Twemoji images.

Contributors

Thank you so much to everyone who has contributed code to PicMo!

picmo's Issues

Improved keyboard navigation

Currently it is possible to cycle through all emojis with the Tab key. This can be cumbersome if there are a lot of emojis. It would be nice to support navigating the grid of emojis with the arrow keys.

Bug when you press tab in searching input

The result, just pressed tab in search bar:

Two Emoji are undefined/missing

Hey there, the two following emoji are running into rendering issues for both Firefox and chrome on OSX (they seem to be fine in Safari). I've checked the unicode listing and relaxed doesn't seem to exist? White frowning face does exist, so i'm not sure what would cause the rendering issues here.

1. Relaxed

2. white_frowning_face

Preview is not updated when cycling through emojis via Tab key

The emoji buttons are focusable, but when they receive focus they don't update the preview.

Emoji-button for HTML/CSS and Javascript

Hello !
I really love Emoji-Button.
I have a question, can we add it to html page ?
I see in documentation that it's for Vanilla Javascript... but does it work for html page ?
Thanks a lot !

Using the download emoji-button-2.12.1.min.js gives weird symbols.

Hello,

So today I decided to include this script into one of my projects. We want it entirely working internally without needing external resources so I used the download emoji-button-2.12.1.min.js in a script to pull the icons. Yet this gives some weird symbols.. instead of the emojis.

Image here: https://i.imgur.com/jss5IDA.png

Any ideas?

Not showing up when being removed

There is a delay between "closing" the emoji picker and its div being removed from the DOM (for the nice fade out animation effect).

If showPicker is called while this animation takes place, the picker does not show up. I guess it's because the div is removed from the DOM a few milliseconds after.

As far as I understand, a check on whether the visible class is present on the DOM in showPicker could fix the issue.

Or maybe adapting the code I use to call the picker?

this.picker.pickerVisible
      ? this.picker.hidePicker()
      : this.picker.showPicker(this.emojiButton.nativeElement);

Spacing issues with emoji listing on Linux

Hey there, i'm not sure if you intend to support Linux (specifically Ubuntu 18.04) but we're seeing some visual problems with the layout of emoji that have multiple icons within them. The icons seem to be wider so they're overlapping.

Emoji quality in demo is very bad

For some reason the emoji quality in the demo
https://joeattardi.github.io/emoji-button is very bad as compared to the README.md picture.

Dark mode support

Option to not autofocus search bar

Hi 😃

on mobile I experience that keyboard opens up right after click on emoji-button. This is because its search bar gets autofocus. Especially on small screens this situation covers much of the screen. Maybe users want to click/browse through emojis instead of searching for them on first hand.

How about making it optional that searchbar gets autofocus on open.

I would be happy to contribute PR if you're interested.

Have a nice week
midzer

Keyboard navigation not working in search results

Somehow I missed this one.

Small vertical margin quirck

It looks like #12 is back in my project:

Removing the margin-top: 0.5em fixes the issue for me:

What do you think is the best way to fix it?

Dependency warning on popperjs

The last yarn update I did, I got this warning:

warning @joeattardi/emoji-button > [email protected]: Popper changed home, find its new releases at @popperjs/core

Looks like the popperjs dependency should be updated :)

Adding new emojis

Hi, I forked your library, updated the emoji-datasource library to the most recent version (5.0.1) and run the processEmojiData.js.

Apart from some problems with the categories array, that I manually fixed, now I have many empty emojis and also emojis composed by multiple ones. Any suggestions on how to fix it? Is there anything else I should update to make it work?

It would be amazing if you could update the library, adding all the new missing emojis.
Thanks!

Z-index not working

• The z-index option needs to be included in the outer most div (class="wrapper"), not the div just inside that (class="emoji-picker"). I'm guessing the outer-most div is being created by the popper, in which case not all of the options (i.e. the z-index) are getting passed.

• Passing additional options in the togglePicker seems to have no effect. Looking at the code, didn't seem like the parameter was being used.

Mixed content warning on demo page

Great tool!!

Just wanted to point out that the demo page is trying to load:

http://joeattardi.github.io:35729/livereload.js?snipver=1

Which is 'insecure' and so the page gives a mixed content warning in the browser.

Suggestions + error

I would like to thank you for this, it's really cool ! :)

My suggestions after implementation:

• Put the "emoji-button-3.0.3.min.js" file, in the source.zip in the future for releases. It's easier to update for large websites. Also name it always the same "emoji-button.min.js".
  

• Some emojies go outside the grid which creates a scrollbar in X. Could be cool to be able to control column properties tho.
  

• I have an error in the console when I hide the searchBar (showSearch: false).
  
  Solution : Goes away when I add "autoFocusSearch: false". Logic !
  So maybe should set "autoFocusSearch" to "false" automatically if "showSearch" is set to "false".

Best regards mate !

The clicked tag is not highlighted with single click

The clicked tag is not highlighted with a single click. But the content has scrolled to the correct position.

The tag is always correctly highlighted with a double click:

Repro video:

https://probe.cdn.aiursoft.com/anduins-site/out.mp4

Types definition file

I can get to work on writing up a new one if it suits you at this time.

Filtred categories appear on search

Hello,

I was using your component from the last couple of days and it's perfect 👍

One small thing I saw is that when I created a picker with some categories, let's say this :

    const picker = new EmojiButton({
      categories: ['smileys', 'animals', 'objects', 'people']
    });

I still can see other categories when searching (for example flags) :

This could be confusing from an user end.

Colon emojis

Hi, I would like to know if there is already a feature to use emojis with :colon: or if there is good advice as how to integrate this.
thanks

Cannot find an option to show or hide tabs

Is there an option to show or hide specific categories tabs?
I tried to find an option to do that in the documentation but I couldn't find any.

Thank you for this amazing bundle.

Pirate flag emoji shows as two emojis overlapped in emoji grid in Chrome

Displays correctly in preview area

Support for custom emojis category?

I'd like to potentially add support for custom emojis section, like missive: https://github.com/missive/emoji-mart#custom-emojis

Need help getting it working with site's CSP

Hi, I am having a problem getting this loaded with my site's Content Security Policy below which is sent in header by Apache. I added URL to script in CSP's style-src and script-src sections.

Header set Content-Security-Policy "default-src 'none'; base-uri 'self'; frame-ancestors 'self'; frame-src 'self' https://discordapp.com; media-src 'self' https://ssl.gstatic.com; img-src 'self' https://www.google-analytics.com https://www.googletagmanager.com https://www.gstatic.com; connect-src 'self' https://www.google-analytics.com; font-src 'self' https://fonts.googleapis.com http://fonts.gstatic.com https://fonts.gstatic.com https://www.google-analytics.com https://maxcdn.bootstrapcdn.com http://maxcdn.bootstrapcdn.com; form-action 'self' https://api.sandbox.paypal.com https://www.sandbox.paypal.com https://secure.paypal.com https://www.paypal.com; style-src 'self' https://fonts.googleapis.com http://maxcdn.bootstrapcdn.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js; script-src 'self' https://kellypublishing.com https://www.google-analytics.com https://www.googletagmanager.com https://cdn.jsdelivr.net/momentjs/2.13.0/moment.min.js https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js; report-uri https://XXXXXX.com/scripts/cspReport.php;"

I tried loading it like:

<script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js"></script>

get following error

I tried adding a single integrity hash calculated at https://www.srihash.org/.

<script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js" integrity="sha384-2+4ak+EZAvYSg5sqFl6/fu1wxegjxZl52L8+Y4WQSSPlCUYia+2w33MeX9moB58o" crossorigin="anonymous"></script>

get the same error

with the three integrity hashes in above error message

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js" integrity="sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU= sha256-j+uGzTtOAr9ui9u6vep2KJDVEj8Ob+QZwv2PG/URCVc= sha256-UTjtaAWWTyzFjRKbltk24jHijlTbP20C1GUYaWPqg7E=" crossorigin="anonymous"></script>

get different error with a different hash

tried adding the fourth hash referenced in above error with

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js" integrity="sha256-2zBSl0N0+jv0CCZBDFVUySEiCCsPhfowMQL7NFMdNXA= sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU= sha256-j+uGzTtOAr9ui9u6vep2KJDVEj8Ob+QZwv2PG/URCVc= sha256-UTjtaAWWTyzFjRKbltk24jHijlTbP20C1GUYaWPqg7E=" crossorigin="anonymous"></script>

and get following error

which is the same error as when I just use

<script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js"></script>

Then I tried like below.

<script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js" /></script>

and adding 'unsafe-inline to style-src and script-src section of CSP and do not get any error.

I get all the same results above whether loaded locally or remotely.

Is it possible to get this working without having to add unsafe-inline to CSP? I recall awhile back I was not able to use Google's reCaptcha service due to I believe some inline code in the file they required, might this be the same reason this is not working with a CSP that does not allow unsafe-inline? If so, any workarounds or is such essential to this and likely other similar type emoji pickers?

Get emoji shortname / code?

I'm using the twemoji, along with a parser in a textarea that converts all the :smile: etc to twemojis, and want to use this. I've found that the twemoji outputs html, but it would be really helpful if it included the name as a data- attribute, or anything that I could extract from the html.

IE11 (even pre version 3) is not supported?

IE11 does not support Object.assign method and I can't use the emoji picker on it even though I'm using picker V2.12.2 which is supposed to support it?

Recent smiles are hidding when click on smile

When I click one of them, all they are gone

I need manually change category then they appear again

I used autoHide: false

[feature] Customizable z-index

When using inside a mat-dialog in Angular, the picker does not show because it is hidden behind the dialog component.

I fixed this a global css style:

.emoji-picker {
  z-index: 1001; // Show over mat-dialog
}

It would be nice to be able to customize the z-index through the config object.

i18n for Recents category

Hello,
Currently is not possible translate the Recents category.
Is not part of the type Category as in the past versions.

Add twemoji support

https://twemoji.twitter.com/
https://www.npmjs.com/package/twemoji

It's weird about position not work.

I use Rails + yarn install this project, and use
javascript code

const post_emoji_button = $('#post_emoji_picker');
const post_picker = new EmojiButton({
    style: 'twemoji',
    position: 'top',
});

post_emoji_button.on('click', () => {
    post_picker.togglePicker(post_emoji_button);
});

html code

<div id="post_emoji_picker">
    <i class="fa fa-smile">
    </i>
</div>

to create a simple EmojiButton, but the position is incorrect, it seems that createPopper cannot create at right position, the .wrapper just display on the html page's bottom whatever the position value.
Is there any tool to debug this?

Error displaying windows 7 emojis

Hello, thanks for this plugin!
I have only one doubt!
How can I use it on older systems? For example, I'm trying to view on windows 7

Couple of suggestions

Hey, great library, thanks!

Here are two suggestions:

• the picker could not close after an emoji is clicked -> it makes sense that people want to click multiple emojis;
• the messages/placeholders could be configurable in order to achieve internalization

Tab icons not displayed correctly using bootstrap

Hello. Great component.
Using this with angular 8 and bootstrap 4 I that the tab icons are not showed correctly, like this:

This is caused by _reboot.scss:

*, ::after, ::before {
box-sizing: border-box;
}

I fixed this issue with this css:

.emoji-picker__tab svg {
    box-sizing: content-box;
}

I shared it for maybe include that in the default css in next versions.

Question about "smiling face" emoji

Hi, do you know why when I select a colored emoji to be inserted into a form field most show the exact colored emoji in the form field while at least one named "smiling face" shows a colorless version? My script inserts the comma before it and it occurs whether that is done or not. I tried in latest Chrome and Firefox. I have <meta charset="UTF-8"> in documents head section. I included a screen capture that loops twice below.

Auto hide not working as expected

Hi,

I'm trying to keep the picker shown and to be closed manually
the current autoHide property seems not to work either the showPreview

moreover, it would be nice if there's an option to remove the categories bar at all

Hardcode extra icons to reduce bundle size

Hi,

first of all, great library 👍
I've implemented it already in one of my websites :)

Can we reduce reduce bundle size somehow? Right now it is almost ~200kb which is kinda heavy. I realized emoji-button uses

"@fortawesome/fontawesome-svg-core": "^1.2.22",
"@fortawesome/free-regular-svg-icons": "^5.10.2",
"@fortawesome/free-solid-svg-icons": "^5.10.2",

for all used icons (in tabs and search).

We could get rid of those extra packages by extracting respective svg html for each icon and put it directly in code. I guess it wont change too often ;)

Would be happy to contribute to this cool project!

Have a nice weekend
midzer

edit:
I found out in dist rollup bundler extracts only icons which are necessary. So removing @FortAwesome packages from bundle will have only minor effect. Maybe there are other possibilities to optimize?

Emoji is adding in the end of the string

Emoji is adding in the end of the string.
Current functionality -
An keeps a doctor away 🍎

Expected functionality -
An 🍎 keeps a doctor away

Some tabs is hard to click 😐

When I try to click it, I have to click the place which is right away from it ( about 5px ). And the third tab is the most difficult one to click.

picker to be too large

My project itself uses rem, which causes the picker to be too large. How to solve it？

The theme option seems to be useless

I have installed: "@joeattardi/emoji-button": "^3.0.0",

But when I call it with:

    public emoji(): void {
        const chatBox = <HTMLElement>document.querySelector('.chat-box');
        const input = <HTMLTextAreaElement>document.getElementById('chatInput');
        if(!this.picker) {
            this.picker = new EmojiButton();
            this.picker.on('emoji', emoji => {
                input.value += emoji;
            });
        }
        this.picker.togglePicker(chatBox, {
            position: 'top-start',
            zIndex: 20,
            theme: 'dark'
        });
    }

It still displays the light theme.

Category shown by default

Hi, I noticed the picker scrolls by default down past the first category of Recent Emojis to the second category Smileys & Emotion. I understand one can click the Recent Emoji icon to get there but is there a way to specify the default category it goes to as I would like it to start at the top or Recent Emojis without any user action.

Setting autoFocusSearch to false does not prevent focus in search field

Hi,

thanks a lot for your project, I like it a lot!
I was stumbling upon an issue though: I was trying to prevent the automatic change of focus to the search field by setting the autoFocusSearch option to false - but unfortunately the search field gets focused anyway.

Cannot say for sure, but maybe it's due to what happens here?
https://github.com/joeattardi/emoji-button/blob/master/src/index.ts#L140

This expression anyway resolves to true, or am I missing something?
Thanks!

JoyPixels/Twemoji, and IE?

Is there any way to use emoji from another library like JoyPixels?

Compile error with latest version

This compile error started popping up in my Angular project after updating to latest version:

ERROR in src/app/shared/custom-forms/components/inputs-complex/input-emoji/input-emoji.component.ts:3:8 - error TS1259: Module '"/home/mic/dev/qontrol/product/frontend/node_modules/@joeattardi/emoji-button/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    3 import EmojiButton from '@joeattardi/emoji-button';
             ~~~~~~~~~~~
    
      node_modules/@joeattardi/emoji-button/index.d.ts:3:1
        3 export = EmojiButton;
          ~~~~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

Playing around with allowSyntheticDefaultImports in my tsconfig.json didn't fix the error.

Typescript doc mentions it's just for type-checking.

Any idea on how to fix that?

Weird almost blank right column

I have a blank column on the right, with only a handful of icons showing up in some lines:

aaaah I think I understand. They are "combined" emojis that are not properly taken into account by the emoji font I have (you can see the plane under the pilot too, or the mic below):

Hum. Not sure how to handle that?

Emoji always appended after the text

Really nice work, I love it!

After testing it, I noticed that the emojis are always appended after the text. If I want to place emojis in the middle of a text (where I leave the cursor) I have to copy/paste, which is tedious work. I assume this is not intended behaviour of the app.

I would be nice also to have the option to display emoji short names, i.e. : smile : for db storage. Older versions of MySQL configured with utf8 charset (and not utf8mb4) struggle with 4-byte unicode characters.

Poffen

Extends out of the box

What an amazing work, thanks!

Ran into this glitch (notice the last line bleeding below the separation line):

Simply using this in my code solved the issue for me:

.emoji-picker__tab-body {
  margin-top: 0px !important;
}

Any idea what could be causing this, and if it is the right way to fix the issue?