A vanilla JS emoji picker
source link: https://www.tuicool.com/articles/FzeQV3B
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Emoji Button
Vanilla JavaScript emoji picker :sunglasses:
Emoji Button turns an ordinary button into an emoji picker. When the target button is clicked, the emoji picker will be shown and a callback will be executed when an emoji is picked.
Demo
https://joeattardi.github.io/emoji-button
Features
- :computer: Vanilla JS, use with any framework
- :mag_right: Emoji search
- :+1|type_3: Skin tone variations
- ⏱ Recently used emojis
Installation
npm install --save emoji-button
Basic usage
import EmojiButton from 'emoji-button'; const button = document.querySelector('#emoji-button'); const picker = new EmojiButton(); picker.on('emoji', emoji => { document.querySelector('input').value += emoji; }); button.addEventListener('click', () => { picker.pickerVisible ? picker.hidePicker() : picker.showPicker(button); });
API
new EmojiButton(options)
Creates an Emoji Button emoji picker.
Options
-
position
: The position to display the picker relative to the reference element. Valid values are:auto auto-start auto-end top top-start top-end right right-start right-end bottom bottom-start bottom-end left left-start left-end
showPicker(referenceElement)
Shows the picker, positioning it relative to the given reference element. The reference element is usually the button or other element that was clicked to open the picker.
hidePicker()
Hides the picker.
pickerVisible
(property)
Will be true
if the picker is currently visible, and false
if not.
on(event, callback)
Adds an event listener. Currently there is only one event:
-
emoji
: Fired when an emoji is picked. The callback is called with a single argument, the emoji character that was picked.
Development
The easiest way to hack on Emoji Button is to use the examples page.
Clone the repository
git clone https://github.com/joeattardi/emoji-button.git
From the repository root
Install dependencies
npm install
Set up the link
npm link
Start the build/watch loop
npm run build:watch
From the examples
subdirectory
Install dependencies
npm install
Link the library
npm link emoji-button
Start the dev server
npm start
Open the page
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK