Vanilla JavaScript emoji picker component

Related tags

Miscellaneous javascript emoji vanilla-javascript twemoji emoji-picker
Overview

Emoji Button

Vanilla JavaScript emoji picker 😎

Screenshot

Screenshot

Demo and Documentation

https://emoji-button.js.org

Features

  • πŸ’» Vanilla JS, use with any framework
  • πŸ˜€ Use native or Twemoji emojis
  • πŸ”Ž Emoji search
  • πŸ‘πŸΌ Skin tone variations
  • ⏱ Recently used emojis
  • ⌨️ Fully keyboard accessible
  • 🎨 Dark, light, and auto themes
  • βš™οΈ Add your own custom emoji images
  • 🧩 Extend functionality with plugins

Browser support

Emoji Button is supported on all modern browsers supporting the latest JavaScript features. Internet Explorer is not supported.

Installation

If you are using a package manager like yarn or npm, you can install Emoji Button directly from the npm registry:

npm install @joeattardi/emoji-button

Basic usage

First, you'll need a trigger element. This is typically a button, and is used to toggle the emoji picker.

<button id="emoji-trigger">Emoji</button>

Once you've added the trigger, you will need to import the EmojiButton class and create a new instance. Various options can be passed to the constructor, which is covered in the API documentation.

After constructing a picker, it can be shown by calling showPicker or togglePicker on it. These functions expect a reference element as a parameter. The picker is positioned relative to this reference element.

When an emoji is selected, the picker will emit an emoji event, passing an object containing data about the emoji that was selected. You can then handle the selected emoji however you want.

For more in depth documentation and examples, please visit https://emoji-button.js.org.

import { EmojiButton } from '@joeattardi/emoji-button';

const picker = new EmojiButton();
const trigger = document.querySelector('#emoji-trigger');

picker.on('emoji', selection => {
  // handle the selected emoji here
  console.log(selection.emoji);
});

trigger.addEventListener('click', () => picker.togglePicker(trigger));

Development

The easiest way to hack on Emoji Button is to use the documentation site. First, you should fork this repository.

Clone the forked repository

git clone https://github.com/your-name/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 site subdirectory

Install dependencies

npm install

Link the library

npm link @joeattardi/emoji-button

Start the documentation site

npm run develop

Open the page

http://localhost:8000

Comments
  • Use Emoji-Button in Static Site?

    Use Emoji-Button in Static Site?

    This is a really great project and the best looking and up-to-date picker out there from what I can tell. Do you have any advice on getting this to run on a static site in the browser so I can use it outside of a node project?

    opened by toddwords 23
  • Need help upgrading from 3.0.0 to 4.0.2

    Need help upgrading from 3.0.0 to 4.0.2

    I need to load your script locally, when I do so with 3.0.0 like:

    <script src="/scripts/emoji-button-3.0.0.min.js" /></script>

    everything works fine in the latest Chrome and Firefox. When I load 4.0.2 the same way I get the following error.

    Uncaught TypeError: emojiPickerMessage.togglePicker is not a function at HTMLInputElement.<anonymous>

    Does that mean the EmojiButton object is not getting created in the emojiPickerMessage variable like it is in 3.0.0? Appreciate any assistance to get it working with 4.0.2. My current code is below, old code that works is the same other than loading version 3.0.0 of the script.

    HTML page

    <script src="/scripts/emoji-button-4.0.2.min.js" /></script>
<input class="divNoBorder " type="button" id="emojiButtonMessage" value="πŸ™‚">

    Javascript file

        var emojiPickerMessage = new EmojiButton({
      recentsCount: 50,
      initialCategory: 'recents'
    });

    var emojiButtonMessage = document.getElementById('emojiButtonMessage');

    emojiButtonMessage.addEventListener('click', () => {
      emojiPickerMessage.togglePicker(emojiButtonMessage); // <== error
    });

    emojiPickerMessage.on('emoji', emoji => {
      document.getElementById('saMessage').value += emoji;
    });
    opened by MorningSleeper 21
  • Initial category button steals focus from an inline picker

    Initial category button steals focus from an inline picker

    I'm spawning one of my website's custom popup objects with a picmo inside it, but the second it's created the page immediately scrolls down to the picker, even though it's completely hidden. I suspect this is due to autofocus of an element, even though in my create function I have "autoFocusSearch" set to false. I'd prefer not to use picmo's popup solution if possible, but if that is the only way forward I'm fine to use that.

    Page in question: https://osekai.net/profiles/?user=2 (you can see on load it scrolls to around where picmo is) image

    https://user-images.githubusercontent.com/33783503/180637745-1e121b54-7600-42e9-aebb-4b65bca0f476.mp4

    if (document.getElementById("comments__emoji_container")) {
    var emoji = document.getElementById("comments__emoji_container");
    const picker = picmo.createPicker({
        rootElement: emoji,
        className: 'osekai__emoji-picker',
        autoFocusSearch: false,
    });
    picker.addEventListener('emoji:select', selection => {
        document.getElementById("comments__input").value += selection.emoji;
    });
}

    Is this a bug or am I doing something wrong?

    bug 
    opened by Tanza3D 15
  • Compile error with latest version

    Compile error with latest version

    This compile error started popping up in my Angular project after updating to latest version:

    ERROR in src/app/shared/custom-forms/components/inputs-complex/input-emoji/input-emoji.component.ts:3:8 - error TS1259: Module '"/home/mic/dev/qontrol/product/frontend/node_modules/@joeattardi/emoji-button/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    
    3 import EmojiButton from '@joeattardi/emoji-button';
             ~~~~~~~~~~~
    
      node_modules/@joeattardi/emoji-button/index.d.ts:3:1
        3 export = EmojiButton;
          ~~~~~~~~~~~~~~~~~~~~~
        This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

    Playing around with allowSyntheticDefaultImports in my tsconfig.json didn't fix the error.

    Typescript doc mentions it's just for type-checking.

    Any idea on how to fix that?

    bug 
    opened by qortex 15
  • Possible to install without npm/yarn?

    Possible to install without npm/yarn?

    Hi there,

    I'm from the dinosaur era and thus I'm still using Javascript/JQuery, how does this library work for vanilla JS?

    Any JSFiddle/CodePen that I can view?

    opened by tanjyeyee 14
  • Support customized data

    Support customized data

    #75

    Not sure this approach is preferred, but this PR add the ability to pass down customized emojiData (where we can have separated package to generate international emoji data).

    Just like what we have now, the English version one will always be shipped with the package, while users are able to pass overridden data if needed.

    import frEmojiData from 'emoji-button/locale-data/fr';
const emojiButton = new EmojiButton({
  emojiData: frEmojiData
});

    One part of the code doesn't seems to be used anywhere, or perhaps I miss something? https://github.com/joeattardi/emoji-button/blob/master/src/emojiArea.ts#L28-L35

    Let me know how you think :) Happy to help generate those international emoji data if needed https://github.com/unicode-org/cldr/tree/master/common/annotations

    opened by roderickhsiao 12
  • Demo without Node / Yarn?

    Demo without Node / Yarn?

    Hi - this looks like a really excellent library, thank you.

    Sorry to ask a basic question - but - I wondered if you might be able to provide a demo page which shows how to use the native emoji button please, linking to the minified JS code here:

    <script src="https://cdn.jsdelivr.net/npm/@joeattardi/[email protected]/dist/index.min.js"></script>

    As I have been trying to do that, but when I copy this code from your docs:

    import EmojiButton from '@joeattardi/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.togglePicker(button); });

    I get errors around the import line, presumably because I am not using node.js

    I'd like to be able to use the library on a basic website, without needing to install node.js or yarn or anything else like that, but I wondered if that is possible, or will this only work with one of those installed?

    Any advice would be much appreciated.

    Thanks!

    question 
    opened by ghost 11
  • Auto hide not working as expected

    Auto hide not working as expected

    Hi,

    I'm trying to keep the picker shown and to be closed manually the current autoHide property seems not to work either the showPreview

    moreover, it would be nice if there's an option to remove the categories bar at all

    Screen Shot 2020-04-05 at 1 16 20 AM bug 
    opened by ezzabuzaid 11
  • Weird almost blank right column

    Weird almost blank right column

    I have a blank column on the right, with only a handful of icons showing up in some lines:

    image

    image

    aaaah I think I understand. They are "combined" emojis that are not properly taken into account by the emoji font I have (you can see the plane under the pilot too, or the mic below):

    image

    Hum. Not sure how to handle that?

    opened by qortex 11
  • Emojis overlapping with footer

    Emojis overlapping with footer

    The emojis overlap with the footer also cuts off some of the text. I've posted an image. Also the search bars have a weird offset.

    https://imgur.com/l25Yweq

    opened by sudo-apt-get-updates 10
  • Jest 27+ / Jest encountered an unexpected token

    Jest 27+ / Jest encountered an unexpected token

    Hello,

    Versions:

    • Angular 13
    • @joeattardi/emoji-button ^4.6.2
    • Jest 27.5.0

    I run my tests with Jest 27+ and I have a runtime error. It's an Angular and nx project.

    I tried several Jest configurations but it does not work.

    have you ever had this error ?

    Capture d’écran 2022-02-08 aΜ€ 11 12 40

    opened by alg-qontrol 9
  • Class names get conflicted

    Class names get conflicted

    Nice library. but the problem is you have styled it with some generic class names like content, header which creates conflict with theme classes. You should style with child selector.

    opened by Mizan-Rifat 0
  • On the second click, the popup-picker stays at bottom of the container.

    On the second click, the popup-picker stays at bottom of the container.

    I think I'm running into the same issue previously raised here: https://github.com/joeattardi/picmo/issues/217, that was closed by the reporter.

    To recreate, set the showRecents: false picker option. When you open the picker the first time, it will display the 'smileys and emotions' category, at the top of the container. If you close and reopen the picker, the container's focus is at the bottom of the container, so you see the flags:

    2022-09-29 12 37 05

    Storybook also doesn't see to respect the value of the checkbox for this UI element, so I don't know if it can be reproduced in storybook alone at the moment: 2022-09-29 12 34 44

    I tried to set the initialEmoji and initialCategory, to the first emoji, but that didn't resolve the issue.

    Just let me know if you need any more info.

    Thanks for the great project!

    bug more info needed 
    opened by DaniBedz 6
  • How can we add custom tags to improve search terms?

    How can we add custom tags to improve search terms?

    I'd like to add custom tags to existing emojis to improve searchability.

    For instance, the "πŸŽƒ" emoji has the following tags in the default database: "celebration", "halloween", "jack", "lantern". However, it does not include the "pumpkin" tag, which is a pretty common name for it. So I'd like to:

    1. Get the database after it's been retrieved from the CDN
    2. Search for the emoji with "label": "jack-o-lantern"
    3. Add a custom search term with tags.push("pumpkin")
    const emojiPicker = picmo.createPicker(options);
emojiPicker.addEventListener("data:ready", () => {
    // How do I access database here?
});

    I've scoured the API documents for a property or method that lets me access the DB, but I can't find it. I've tried adding custom emojis in the createPicker() options, but that appends a new emoji, instead of modifying an existing one. Finally, I came up with a hacky solution, but this creates a second πŸŽƒ entry, instead of just modifying the existing one:

    emojiPicker.customEmojis.push({
    "label":"jack-o-lantern",
    "tags":["pumpkin"],
    "emoji":"πŸŽƒ",
})

    How do I gain access to the DB to add extra search terms?

    enhancement 
    opened by marquizzo 1
  • Multiple custom categories

    Multiple custom categories

    Hi, Is it planned to be able to have multiple custom categories ? For several custom characters with their own emojis, for example. With the ability to set their names and icons.

    Thanks!

    enhancement 
    opened by Ionys320 1
Releases(v5.7.2)

  • v5.7.2(Oct 26, 2022)

    • [picmo] Removed inconsistent scrollbar styling
    • [@picmo/popup-picker] Fix issue where the theme was not updated properly via updateOptions from a popup picker. (#247)
    Source code(tar.gz)
    Source code(zip)

  • v5.7.1(Oct 26, 2022)

  • v5.7.0(Sep 9, 2022)

  • v5.6.1(Aug 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.
    Source code(tar.gz)
    Source code(zip)

  • v5.6.0(Aug 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.
    Source code(tar.gz)
    Source code(zip)

  • v5.5.2(Aug 17, 2022)

  • v5.5.1(Aug 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
    Source code(tar.gz)
    Source code(zip)

  • v5.5.0(Aug 17, 2022)

    ** Note: This release has a few issues with the UMD and dependency bundling, it should be avoided; use 5.5.1 or newer instead.

    • 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
    Source code(tar.gz)
    Source code(zip)

  • v5.4.2(Aug 6, 2022)

  • v5.4.1(Aug 4, 2022)

    • [picmo] Fixed an issue where the initial category button would steal the focus on creation in an inline picker.
    • [picmo] Fixed default options processing so that a LocalStorageProvider isn't instantiated immediately upon importing PicMo; this was causing errors in environments like Next.js where localStorage is not available. Now localStorage is only referenced when calling createPicker.
    Source code(tar.gz)
    Source code(zip)

  • v5.4.0(Jul 31, 2022)

    • [picmo] Added new autoFocus option to better control autofocus behavior (or disable it entirely).
    • [picmo] Deprecated the autoFocusSearch option in favor of autoFocus.
    • [@picmo/popup-picker] Upgraded to use the floating-ui library (successor to Popper.js).
    • [@picmo/renderer-twemoji] Made SVG container display: none to fix popup positioning issues.
    Source code(tar.gz)
    Source code(zip)

  • v5.3.0(Jul 17, 2022)

    • [picmo] Fixed custom styling not being applied to the search results scrollbar (#215).
    • [@picmo/renderer-twemoji] New rendering design using SVG sprite sheets for improved performance (#210).
    Source code(tar.gz)
    Source code(zip)

  • v5.2.0(Jun 11, 2022)

  • v5.1.2(Jun 4, 2022)

    Fixed

    • [picmo] Fixed buttons within the picker to have the attribute type="button" to prevent unintentional form submission when a picker appears inside of a form (#209).

    Full Changelog: https://github.com/joeattardi/picmo/compare/v5.1.1...v5.1.2

    Source code(tar.gz)
    Source code(zip)

  • v5.1.1(May 30, 2022)

    Fixed

    • [@picmo/popup-picker] Fixed issue where the positionCleanup function was not defined when using fixed positioning, leading to a potential exception when closing a popup picker
    Source code(tar.gz)
    Source code(zip)

  • v5.1.0(May 22, 2022)

    Added

    • Added a new in-memory emoji data store for scenarios where IndexedDB is not available (#199). See Emoji Data for more details.

    Picker options

    • New option: dataStore to specify a factory to create the desired data store type.

    Popup options

    • New option: className to apply additional CSS classes to the popup container (to override the theme or set a z-index). (#198).
    Source code(tar.gz)
    Source code(zip)

  • v5.0.1(May 18, 2022)

  • v5.0.0(May 18, 2022)

    First PicMo release (previously Emoji Button).

    • @joeattardi/emoji-button package split into three packages:
      • picmo - The main emoji picker package, can be used to create inline emoji pickers.
      • @picmo/popup-picker - The popup picker package, can be used to create popup emoji pickers. Requires picmo as a peer dependency.
      • @picmo/renderer-twemoji - The Twemoji renderer. Requires picmo as a peer dependency.
    • All packages now include UMD builds.

    Added

    • Emoji data is stored in an IndexedDB database locally.
    • data:ready event signals when the database is initialized and ready to use.
    • New rendering architecture adds support for implementing additional emoji renderers.
    • Basic support for auto-detecting the available emoji version (the default behavior). A specific emoji version can still be passed in the picker options.
    • Added data management functions:
      • createDatabase: Creates an emoji database ahead of time. This is not required as the picker will initialize the database if one doesn't exist.
      • deleteDatabase: Deletes an emoji database
      • deleteRecents: Deletes the recent emojis from local storage
      • Emojis can be searched via tags. An emoji's tags are also shown in the preview area.
    • Popup pickers now have a close button as well.
    • Events for when the picker is opened (picker:open) and closed (picker:close).

    Picker options

    • New option: className for applying custom theme styling.
    • New option: initialEmoji for initial emoji selection.
    • New option: locale for emoji data locale.
    • New option: messages for emojibase-data message data.
    • New option: renderer for specifying emoji renderer

    Popup options

    • New option: hideOnClickOutside to control whether or not the picker should close when clicking outside of it.
    • New option: hideOnEscape to control whether or not the picker should close when pressing the escape key.
    • New option: showCloseButton to control whether or not the close button should be shown.
    • New option: triggerElement to denote the element that should trigger the popup.

    Changed

    • The main picmo package only creates inline pickers. Popup pickers are created with createPopup from the @picmo/popup-picker package instead of createPicker from the main package. This function accepts the same options as the main package for the picker itself, and accepts an additional object with popup specific options.
    • Emoji data is no longer bundled with the package. It can be supplied within the bundle from the emoji-data npm package or can be downloaded from a CDN at runtime.
    • Popup code and Popper.js dependency separated into @picmo/popup-picker package.
    • Twemoji code separated into @picmo/twemoji package.
    • emoji event changed to emoji:select.
      • Emitted data has the properties { data, emoji, hexcode, url, label }.
    • hidden event changed to to emoji:hide in @picmo/popup-picker.
    • Twemoji options changed to only specify the desired image type: svg (the default) or png.
    • Event listeners are now added to pickers via .addEventListener instead of .on.

    Picker options

    • showAnimation changed to animate.
    • custom format changed.
      • Previous: { name, emoji }
      • New: { data, emoji, label, tags, url }
    • emojiVersion is now a number or the string auth for automatic detection.
    • recentsCount changed to maxRecents.
    • showCategoryButtons changed to showCategoryTabs.
    • rows changed to visibleRows.

    Popup options

    • autoHide changed to hideOnEmojiSelect.

    Removed

    • Plugins have temporarily been removed pending a larger redesign of the plugin system.

    Picker options

    • icons removed.
    • plugins removed.
    • twemojiOptions removed (now controlled by @picmo/renderer-twemoji package).
    • styleOptions removed (now controlled by CSS variables in CSS class specified by the className option).
    • Fuzzy search was removed.
    Source code(tar.gz)
    Source code(zip)

  • v4.6.4(Mar 17, 2022)

  • v4.6.2(Nov 25, 2021)

  • v4.6.1(Nov 24, 2021)

    Changelog

    • 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.
    Source code(tar.gz)
    Source code(zip)

  • v4.6.0(Dec 4, 2020)

    Changelog

    • Added support for custom emoji data
    • Fixed the incorrect category button being selected when selecting the Activities or Travel categories.
    Source code(tar.gz)
    Source code(zip)

  • v4.5.1(Nov 24, 2020)

  • v4.5.0(Nov 17, 2020)

  • v4.4.0(Nov 15, 2020)

  • v4.3.0(Nov 3, 2020)

  • v4.2.0(Sep 21, 2020)

    New features

    • The emoji event now includes the name of the selected emoji

    Bug fixes

    • Fixed picker jumping before being destroyed
    • Fixed hide animation not working
    Source code(tar.gz)
    Source code(zip)

  • v4.1.0(Aug 29, 2020)

    New features

    • Added hidden event that is emitted when the picker is hidden (thanks @jmlee2k)
    • Added the ability to switch themes after constructing the picker (thanks @jmlee2k)

    Bug fixes

    • Fixed error when hiding picker after showing in mobile mode (thanks @jmlee2k)
    • Fixed wrong category being highlighted when the picker is first shown in some browsers (#93)
    • Fixed picker not hiding immediately when animations are disabled in some browsers (#92)
    • Fixed focus stealing when hiding picker in some browsers (#91)
    • Fixed picker alternating position over/under target (#90)
    • Fixed jumping scroll position on some browsers (#87)
    Source code(tar.gz)
    Source code(zip)

  • v4.0.4(Aug 24, 2020)

  • v4.0.3(Aug 24, 2020)

Owner
Joe Attardi
Staff Software Engineer @ Synopsys. Lover of all things Java and JavaScript.
Joe Attardi
GitHub https://emoji-button.js.org/
An arbitrary size Bit-Vector implementation in JavaScript

BitSet.js BitSet.js is an infinite Bit-Array (aka bit vector, bit string, bit set) implementation in JavaScript. That means that if you invert a bit v

Robert Eisele 207 Dec 9, 2022
SPOILER ALERT! A happy little bit of javascript to hide spoilers on your site.

SPOILER ALERT! Don't spoil it! Hide copy and images with a bit of SVG blur. Taste on mouseover. Eat on click. Do you publish spoilers? Do you wish you

Joshua Hull 473 Sep 27, 2022
JavaScript Survey and Form Library

SurveyJS is a JavaScript Survey and Form Library. SurveyJS is a modern way to add surveys and forms to your website. It has versions for Angular, jQue

SurveyJS 3.5k Jan 1, 2023
⚑️ A resource to help figure out what JavaScript array method would be best to use at any given time

JavaScript Array Explorer When I was first learning array methods, I spent a lot of time digging through the docs to find the appropriate one, and I h

Sarah Drasner 2.6k Jan 2, 2023
🌳 Tiny & elegant JavaScript HTTP client based on the browser Fetch API

Huge thanks to for sponsoring me! Ky is a tiny and elegant HTTP client based on the browser Fetch API Ky targets modern browsers and Deno. For older b

Sindre Sorhus 8.5k Jan 2, 2023
Extensive math expression evaluator library for JavaScript and Node.js

?? Homepage Fcaljs is an extensive math expression evaluator library for JavaScript and Node.js. Using fcal, you can perform basic arithmetic, percent

Santhosh Kumar 93 Dec 19, 2022
πŸ“ Algorithms and data structures implemented in JavaScript with explanations and links to further readings

JavaScript Algorithms and Data Structures This repository contains JavaScript based examples of many popular algorithms and data structures. Each algo

Oleksii Trekhleb 158k Dec 31, 2022
This is my To-do-list project for my Javascript module at Microverse.

To do List This is a To do list project built for learning purposes. Built With HTML Bootstrap Javascript CSS HTML Webpack How to use it Clone the rep

Jonathas Tavares 4 Oct 8, 2021
A JavaScript, zero-dependency, super small version of IP2Location LITE country lookups.

A JavaScript, zero-dependency, super small version of IP2Location LITE country lookups.

Statsig 34 Dec 14, 2022
An easy to use, yet advanced and fully customizable javascript/jQuery paginator plugin

anyPaginator An easy to use, yet advanced and fully customizable Javascript/jQuery paginator plugin. anyPaginator is a spinoff of the anyList project

Arne Morken 2 Feb 17, 2022
Shikimori.ts - JavaScript & TypeScript wrapper for shikimori.one

shikimori.ts shikimori.ts - JavaScript & TypeScript wrapper for shikimori.one Features Full TypeScript support Support all platforms Easy to use Table

null 5 Sep 15, 2022
This library was designed to be used in SPA framework wrappers for the FingerprintJS Pro Javascript Agent

Framework-agnostic SPA service wrapper. Use it to build a FingerprintJS Pro wrapper for your favorite framework.

FingerprintJS 12 Sep 3, 2022
ChelseaJS - a Javascript library for creative, generative Coding

ChelseaJS is a Javascript library for creative, generative Coding. It's simple and intuitive syntax makes it easy for everyone (including non-coders)

Prakrisht Dahiya 26 Oct 6, 2022
Estrela - a JavaScript library for building reactive web components inspired by lit

Estrela ⭐ Full Reactive Web Components Estrela is a JavaScript library for building reactive web components inspired by lit. Just like Lit, Estrela is

null 50 Oct 31, 2022
Vanilla JavaScript emoji picker component

Vanilla JavaScript emoji picker ?? Screenshot Demo and Documentation https://emoji-button.js.org Features ?? Vanilla JS, use with any framework ?? Use

Joe Attardi 1.1k Dec 31, 2022
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
Vanilla javascript emoji picker

FG Emoji Picker - Emoji picker created with vanilla javascript This is the simplest to use emoji picker built with vanilla javascript. Benefits: It is

null 41 Dec 16, 2022
Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/

Duet Date Picker Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Duet Date Picker can be implemented and us

Duet Design System 1.6k Jan 6, 2023
Easily add emoji support to your website! Replace keywords with emoji's :yum:

Emoji-Parser.js ?? A emoji parser to easily add emoji support to your website Show your support! Features: Use's the same style GitHub does! TON's of

Marketing Pipeline 13 Sep 9, 2022
A date picker web component, and spiritual successor to duet date picker

<date-picker> A date picker web component, based on duet date picker, except authored with Lit and using shadow DOM. This is a work in progress. Todo:

Nick Williams 25 Aug 3, 2022