Convenient Emoji Picker In Vanilla JavaScript – Picmo

Preview:

Description:

Picmo (formly Emoji Button) is a pure JS emoji picker where the users can quickly search and select emoji from a categorized emoji picker popup.

It also provides a Recent Used tab that shows the recently picked emoji.

Supports both native emoji and Tweemoji library.

How to use it:

1. Install & download the Emoji Button.

# Yarn
$ yarn add picmo

# NPM
$ npm i picmo –save

2. Import the Picmo into the document.

import { createPicker } from 'picmo';

3. Create a container to hold the emoji picker.

<div id="picker"></div>

4. Initialize the emoji picker. That’s it.

const rootElement = document.querySelector('#picker');
const picker = createPicker({
  rootElement,
});

5. Get the selected emoji picker.

picker.addEventListener('emoji:select', event => {
  console.log('Emoji selected:', event.emoji);
});

Changelog:

v5.8.5 (06/24/2023)

• Removed the global web storage shim when local storage is not available

v5.8.4 (05/05/2023)

• Switched to the new fork of Twemoji to fix broken CDN URLs

v5.8.2 (04/14/2023)

• Fixed an issue where an IndexedDB error was thrown on multiple createPicker calls.

v5.8.1 (03/05/2023)

• Fixed an issue where server-side rendering frameworks like SvelteKit were throwing an error when creating the picker

v5.8.0 (02/25/2023)

• Added new UI text translations

v5.7.6 (02/08/2023)

• Bugfixes

v5.7.5 (02/07/2023)

• Bugfixes

v5.7.4 (02/05/2023)

• Bugfixes

v5.7.3 (01/29/2023)

• Fixed buggy scroll adjustment code that was sometimes causing issues when showing/hiding the picker.
• Added the picmo__ prefix to all class names to reduce style conflicts.
• Replaced all uses of Element.replaceChildren with a safer implementation that has better browser compatibility.

v5.7.2 (10/26/2022)

• Removed inconsistent scrollbar styling
• Fix issue where the theme was not updated properly via updateOptions from a popup picker.

v5.7.1 (10/26/2022)

• Fixed incorrect scroll position when reopening popup under certain conditions.

v5.7.0 (09/08/2022)

• [@picmo/popup-picker] Added a new onPositionLost option to configure the behavior of the popup if the reference element is lost.

v5.6.1 (08/26/2022)

• Fixed some invalid CSS properties.
• [@picmo] Click event propagation is stopped when selecting an emoji. This fixes an issue where the picker would close a popup when selecting an emoji from the recents category, if hideOnEmojiSelect is set to false.
• [@picmo/popup-picker] Fixed positioning/focus issues when opening a popup.
• [@picmo/popup-picker] Fixed animation order to prevent an incorrectly positioned picker from appearing momentarily before “jumping” to the final location and animating.
• [@picmo/popup-picker] Fixed type of options parameter on the toggle method to be optional as documented.

v5.6.0 (08/22/2022)

• [picmo] Added ability to update certain picker options after creation.
• [picmo] Improved layout of category tabs when picker is very narrow or very wide.
• [@picmo/popup-picker] Added ability to specify new reference and trigger elements when opening the picker.

v5.5.2 (08/17/2022)

• Fixed process.env appearing in build output.

v5.5.1 (08/17/2022)

• Fixed issues with UMD build (however, different URL patterns are now required)
• Fixed bundling issue where core picmo packages was bundled with all add-on packages
• [@picmo/popup-picker] Fixed an issue where the variant popup would not be reset when closing the picker

v5.5.0 (08/17/2022)

• Major CSS refactoring that will allow for easier style overrides when needed. Class names are no longer scoped with random prefixes for easier customization.
• [picmo] Added a new auto autofocus option that will choose a target based on available elements.
• [picmo] Added a global configuration store with an injectStyles option to control automatic CSS injection.
• [picmo] Fixed invalid scrollbar CSS properties.
• [@picmo/popup-picker] Added type=”button” to the popup close button to prevent accidental form submission.
• [@picmo/popup-picker] Focus is returned to the trigger when closing only when pressing Escape or selecting an emoji

v5.4.2 (08/07/2022)

• [picmo] Removed inline style from SVG icons that was causing Content-Security-Policy problems

v5.4.1 (08/04/2022)

• Rename to Picmo

v4.6.4 (03/18/2022)

• Fixed TypeScript issue with twemoji

v4.6.2 (11/25/2021)

• Fixed additional XSS vulnerabilities

v4.6.1 (11/24/2021)

• Fixed XSS vulnerability with custom emojis. Custom emoji URLs could be crafted in such a way to trigger an XSS attack. All places where custom emoji URLs are used are now sanitized.

v4.6.0 (12/04/2020)

• Added support for custom emoji data
• Fixed the incorrect category button being selected when selecting the Activities or Travel categories.

v4.5.1 (11/24/2020)

• Fixed incorrect typings

v4.5.0 (11/17/2020)

• Performed refactoring of Emoji Button internals.
• Full typings are now automatically generated at build time.

v4.4.0 (11/14/2020)

• Added twemojiOptions option to the picker options

v4.3.0 (11/03/2020)

• Added support for overriding CSS variables to further customize the emoji picker’s appearance.

v4.2.0 (09/20/2020)

• The emoji event now includes the name of the selected emoji
• Fixed picker jumping before being destroyed
• Fixed hide animation not working

v4.1.0 (08/29/2020)

• Added hidden event that is emitted when the picker is hidden
• Added the ability to switch themes after constructing the picker
• Bug fixes

v4.0.4 (08/24/2020)

• Made rootElement option optional.

v4.0.3 (08/24/2020)

• Fixed the scroll position jumping when showing the picker in some cases.

v4.0.2 (07/31/2020)

• Added the missing rootElement option to the type definitions.

v4.0.1 (07/23/2020)

• Fixed a minor doc issue

v4.0.0 (07/23/2020)

• Added support for custom emojis
• Added support for plugins
• Added support for custom icons
• Added support for fixed positioning
• Added the ability to disable animations
• Added support to specify the initial category
• Added fuzzy search support in emoji search

v3.1.1 (06/07/2020)

• Improved experience on mobile
• Fixed error in the console when search field is hidden
• Fix scrollbars by increasing horizontal padding

v3.0.3 (05/01/2020)

• Fixed an issue where the autoFocusSearch option was not being respected if set to false.

v3.0.2 (04/28/2020)

• Fixed an issue where the category buttons were not behaving correctly when the browser was zoomed in or out.

v3.0.1 (04/25/2020)

• Fixed errors when there are no recent emojis in local storage.

v3.0.0 (04/17/2020)

• Improved show/hide animations
• Changed from clicking to switch tabs to an “endless scroll” design
• Improved keyboard navigation
• More flexible display options – emojis per row, number of rows, emoji size
• This release drops support for Internet Explorer 11

v2.12.1 (03/12/2020)

• Fixed the search results so that they only contain emojis in the categories that are selected.

v2.11.2 (03/01/2020)

• Added support for Twemoji
• Fixed some emoji data

v2.11.1 (02/28/2020)

• Bugs fixed

v2.11.0 (02/27/2020)

• Various CSS tweaks
• Added the categories option

v2.10.0 (02/25/2020)

• Fix flag emoji names
• New emoji data source with more versions available

v2.9.1/2/3 (02/23/2020)

• Fixed TypeScript declarations
• Format emoji names

v2.9.0 (02/22/2020)

• Added theme options: light, dark, and auto (light or dark depending on OS settings)

v2.8.2 (02/15/2020)

• Fixed a few minor bugs with keyboard navigation in the search results view.

v2.8.1 (02/13/2020)

• Fixed broken keyboard navigation in search results view.

v2.8.0 (02/11/2020)

• Implemented keyboard navigation
• Fixed display issue when showing variant popup
• Fixed size of close button on variant popup

v2.7.3 (02/09/2020)

• Fixed behavior when pressing Tab while in the search field
• Fixed disappearing recents when autoHide is set to false

v2.7.2 (01/26/2020)

• Removed margin on outer picker element

v2.7.1 (01/25/2020)

• Fixed missing recent emoji

v2.7.0 (01/25/2020)

• Added an emojiVersion option that lets you specify which emojis to include in the picker.
• Upgraded to new popper.js library

v2.6.1 (01/24/2020)

• Fixed an issue where the picker would not appear if it was triggered while a previous one was being hidden.

v2.6.0 (01/24/2020)

• Added new emoji

v2.5.4 (01/07/2020)

• Fixed accidental centering of emojis with an incomplete row

v2.5.3 (01/07/2020)

• Fixed IE11 support

v2.5.2 (12/12/2019)

• Scroll to top when switching tabs

v2.4.0 (12/10/2019)

• Fix emoji content overflowing container
• Add customizable z-index

v2.3.0 (11/17/2019)

• UI tweaks
• Added more options

v2.2.5 (11/17/2019)

• Update

v2.2.0 (11/15/2019)

• Added autoFocusSearch option

v2.1.2 (11/09/2019)

• Fixed rendering issue with some emojis

v2.1.1 (10/19/2019)

• Added option to specify the root element for the picker to be rendered under.
• Added option to supply i18n strings.
• Added option to prevent the picker from auto-hiding when picking an emoji.
• Fixed the search results not taking up the full height.