@picmo/popup-picker
Adds support to PicMo for showing a picker in a popup element.
Requires the base PicMo package to be installed as a peer dependency.
Installation
npm install @picmo/popup-picker
Basic usage
To show a popup picker, you'll need a trigger element. This is often a button or other clickable element that can show the popup picker in response to a click event.
import { createPopup } from '@picmo/popup-picker';
const triggerButton = document.querySelector('#emoji-button');
// Create the picker
const picker = createPopup({}, {
// The element that triggers the popup
triggerElement: triggerButton,
// The element to position the picker relative to - often this is also the trigger element,
referenceElement: triggerButton,
// specify how to position the popup
position: 'bottom-start'
});
// 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);
});