Convenient Emoji Picker In Vanilla JavaScript – Picmo

Category: Javascript | October 26, 2022
Author:joeattardi
Views Total:362 views
Official Page:Go to website
Last Update:October 26, 2022
License:MIT

Preview:

Convenient Emoji Picker In Vanilla JavaScript – Picmo

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.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.

You Might Be Interested In:


2 thoughts on “Convenient Emoji Picker In Vanilla JavaScript – Picmo

Leave a Reply