Skip to content
This repository has been archived by the owner on Sep 26, 2023. It is now read-only.

joeattardi/picmo

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Mar 4, 2023
c2d55e1 · Mar 4, 2023
Aug 17, 2022
Apr 29, 2022
Feb 25, 2023
Aug 18, 2022
Aug 25, 2022
Mar 4, 2023
May 15, 2022
Feb 12, 2023
Sep 5, 2022
Apr 7, 2022
Jul 16, 2022
May 9, 2022
Jul 17, 2022
Mar 19, 2022
Feb 25, 2023
Apr 13, 2022
Aug 29, 2019
May 8, 2022
Apr 13, 2022
Apr 5, 2022
Apr 25, 2022
Mar 4, 2023
Sep 21, 2019
Jul 17, 2022
Feb 8, 2023
Feb 8, 2023
Feb 12, 2023
Apr 25, 2022
Jul 17, 2022
Jan 26, 2023

Repository files navigation

PicMo

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

Formerly known as Emoji Button.

PicMo screenshot

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:

Contributors

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