dab7914eab
* Commit updated Javascript packages * Bump preact from 10.5.4 to 10.5.5 in /build/javascript (#265) * Trying a new github workflow to install javascript packages * Bump tailwindcss from 1.9.2 to 1.9.4 in /build/javascript (#266) Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss) from 1.9.2 to 1.9.4. - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/compare/v1.9.2...v1.9.4) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Commit updated Javascript packages * Bump preact from 10.5.4 to 10.5.5 in /build/javascript Bumps [preact](https://github.com/preactjs/preact) from 10.5.4 to 10.5.5. - [Release notes](https://github.com/preactjs/preact/releases) - [Commits](https://github.com/preactjs/preact/compare/10.5.4...10.5.5) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Owncast <owncast@owncast.online> * Bump @justinribeiro/lite-youtube in /build/javascript Bumps [@justinribeiro/lite-youtube](https://github.com/justinribeiro/lite-youtube) from 0.9.0 to 0.9.1. - [Release notes](https://github.com/justinribeiro/lite-youtube/releases) - [Commits](https://github.com/justinribeiro/lite-youtube/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Owncast <owncast@owncast.online> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com>
106 lines
2.9 KiB
Markdown
106 lines
2.9 KiB
Markdown
|
|
|
|
|
|
Vanilla JavaScript emoji picker 😎
|
|
|
|
## Screenshot
|
|
|
|
|
|
|
|
|
|
## Demo and Documentation
|
|
|
|
[https://emoji-button.js.org](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.
|
|
|
|
```html
|
|
<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](https://emoji-button.js.org/docs/api).
|
|
|
|
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](https://emoji-button.js.org).
|
|
|
|
```javascript
|
|
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
|