emoji-mart-vue-fast

repository·master·Indexed 43 days ago

https://github.com/serebrov/emoji-mart-vue

A high-performance, customizable Slack-like emoji picker component for Vue.js. This version is a fork of emoji-mart-vue optimized for efficient rendering and fast mounting/unmounting. It provides a Picker component, an Emoji component for individual rendering, and an EmojiIndex class for headless search and data management. Supports multiple emoji sets including Apple, Google, Twitter, and Facebook, and allows for custom emoji additions and storage handler overrides. Version 15.0.5.

Tokens: 5.3K
Snippets: 27
Records: 28
Agent score: 56%

What's inside emoji-mart-vue-fast

How the Picker component works
master
The Picker component is not opinionated about UI implementation. It does not automatically insert emojis into text inputs or manage its own visibility (showing/hiding).
Instead, it returns an emoji object via the @select event. You are responsible for:
1. Mounting/unmounting the component (it is optimized for fast creation/destruction).
2. Positioning the picker in your UI.
3. Using the returned emoji object (e.g., using emoji.native for the actual character or emoji.colons for text representation) to update your application state.
https://github.com/serebrov/emoji-mart-vue/blob/master/README.md

Initialize the EmojiIndex

master

To use the Picker or Emoji components, you must first initialize an EmojiIndex with emoji data. You can use the full dataset or a specific set (like facebook.json) to reduce bundle size.

import data from 'emoji-mart-vue-fast/data/all.json'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast'

let emojiIndex = new EmojiIndex(data)

import data from 'emoji-mart-vue-fast/data/all.json'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast'
let emojiIndex = new EmojiIndex(data)

Customize Picker Styles and Assets
master
Import Default Styles
To use the standard look, import the CSS file:
```
import 'emoji-mart-vue-fast/css/emoji-mart.css'
```
Self-hosting Emoji Sheets
By default, image-based emoji sets (apple, google, twitter, facebook) load background images from unpkg.com. To self-host them, override the CSS:
```
/* Example: load twitter sheet from own server */
.emoji-mart-body .emoji-type-image.emoji-set-twitter {
	background-image: url(/img/twitter-5.0.1-sheets-256-64.png);
}
```
```
.emoji-mart-body .emoji-type-image.emoji-set-twitter {
	background-image: url(/img/twitter-5.0.1-sheets-256-64.png);
}
```
https://github.com/serebrov/emoji-mart-vue/blob/master/README.md
Install emoji-mart-vue-fast from GitHub
master
If you need to install directly from a specific GitHub branch or tag (useful for forks), use the following command:
```
npm install --save serebrov/emoji-mart-vue#5.4.9
```
https://github.com/serebrov/emoji-mart-vue/blob/master/README.md
Build the component and demo app
master
Use the following commands to build the project for development:
- npm run build: Builds the component and starts watching for file changes.
- npm run dev:docs: Builds the demo app and starts watching for changes.
To view the demo, open docs/index.html in a browser or serve the directory using http-server:
```
npx http-server ./docs
```
```
# Build the component and watch for file changes.
$ npm run build

# Build the demo app and watch for file changes.
$ npm run dev:docs
```
https://github.com/serebrov/emoji-mart-vue/blob/master/README.md
Install emoji-mart-vue-fast via npm
master
Install the package using npm to add the emoji picker to your project.
```
npm install --save emoji-mart-vue-fast
```
https://github.com/serebrov/emoji-mart-vue/blob/master/README.md
Run tests
master
Execute the test suite using Jest:
- npm run jest: Runs all tests.
- npm run jest-debug: Runs tests in debug mode (requires opening chrome://inspect in Chrome to use the node inspector).
```
# Run tests
npm run jest

# To debug tests
npm run jest-debug
```
https://github.com/serebrov/emoji-mart-vue/blob/master/README.md
Handle unsupported emojis with fallback
master
If a specific emoji set (like Facebook) does not support a certain emoji, the <emoji> component will render nothing by default. You can provide a fallback prop to define what should be rendered instead.
```
function emojiFallback(emoji) {
	return `:${emoji.short_names[0]}:`
}
```
```
<emoji set="facebook" emoji="shrug" :size="24" :fallback="emojiFallback" />
```
https://github.com/serebrov/emoji-mart-vue/blob/master/README.md

Quick Start Example for Vue

master

This example demonstrates how to set up the Picker component, initialize the EmojiIndex with emoji data, and handle the @select event to output emojis.

Note on Imports:

For Vue 2: Import Picker and EmojiIndex from emoji-mart-vue-fast.
For Vue 3: Import Picker and EmojiIndex from emoji-mart-vue-fast/src.
Always import the CSS: import "emoji-mart-vue-fast/css/emoji-mart.css".

<template>
  <div class="row">
    <Picker :data="emojiIndex" set="twitter" @select="showEmoji" />
  </div>

  <div class="row">
    <div>
      {{ emojisOutput }}
    </div>
  </div>
</template>

<script>
// Import data/twitter.json to reduce size, all.json contains data for
// all emoji sets.
import data from "emoji-mart-vue-fast/data/all.json";
// Import default CSS
import "emoji-mart-vue-fast/css/emoji-mart.css";

// Vue 2:
import { Picker, EmojiIndex } from "emoji-mart-vue-fast";
// Vue 3, import components from `/src`:
import { Picker, EmojiIndex } from "emoji-mart-vue-fast/src";

// Create emoji data index.
// We can change it (for example, filter by category) before passing to the component.
let emojiIndex = new EmojiIndex(data);

export default {
  name: "App",
  components: {
    Picker
  },

  data() {
    return {
      emojiIndex: emojiIndex,
      emojisOutput: ""
    };
  },

  methods: {
    showEmoji(emoji) {
      this.emojisOutput = this.emojisOutput + emoji.native;
    }
  }
};
</script>

<style>
.row { display: flex; }
.row > * { margin: auto; }
</style>

Configure EmojiIndex filtering and custom emojis

master

When creating an EmojiIndex, you can pass an options object to filter categories or add custom emojis.

Constructor Options

Param	Default	Description
`include`	`[]`	Only load these categories (e.g., `['people', 'nature']`)
`exclude`	`[]`	Exclude these categories (e.g., `['flags']`)
`custom`	`[]`	Array of custom emoji objects
`recent`		Array of string IDs for the 'recent' category
`recentLength`		Number of emojis in the 'recent' category
`emojisToShowFilter`	`((emoji) => true)`	Function to decide if an emoji should be displayed

Example: Filtering and Custom Emojis

const custom = [
	{
		name: 'Octocat',
		short_names: ['octocat'],
		text: '',
		emoticons: [],
		keywords: ['github'],
		imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7',
	}
]

let index = new EmojiIndex(data, {
	emojisToShowFilter: (emoji) => true,
	include: ['people', 'nature'],
	custom,
})

Use the Emoji component

master

The <emoji> component renders a single emoji as either a native character or an image.

Props

Prop	Required	Default	Description
`emoji`	✓		String (ID or colons) or an `emoji` object
`size`	✓		Width and height in pixels
`native`		`false`	Renders the native unicode emoji
`set`		`apple`	The emoji set: `'apple', 'google', 'twitter', 'facebook'`
`sheetSize`		`64`	Sheet size: `16, 20, 32, 64`
`skin`		`1`	Skin color: `1, 2, 3, 4, 5, 6`
`tag`		`span`	HTML tag to use (set to `button` for clickable)
`fallback`			Function `(emoji) => string` to render if emoji is unsupported

Events

Event	Params	Description
`select`	`(emoji) => {}`	Emitted on click
`mouseenter`	`(emoji) => {}`	Emitted on hover
`mouseleave`	`(emoji) => {}`	Emitted on leave

<emoji :data="index" emoji="santa" set="twitter" :size="32" />

Use the Picker component

master

The <picker> component provides a full emoji selection interface. It requires an emojiIndex passed to the :data prop.

Basic Usage

<picker :data="emojiIndex" @select="addEmoji" />

Common Props

Prop	Default	Description
`data`	(Required)	The `EmojiIndex` instance
`set`	`apple`	The emoji set: `'apple', 'google', 'twitter', 'facebook'`
`emojiSize`	`24`	Width/height of emojis; affects picker width
`native`	`false`	If `true`, renders native unicode emojis instead of images
`showSearch`	`true`	Whether to display the search section
`showCategories`	`true`	Whether to display categories
`showSkinTones`	`true`	Whether to display the skin tones picker
`i18n`	`{...}`	Object for localizing strings (e.g., `search`, `categories`)
`title`	`Emoji Mart™`	Title shown when no emoji is hovered

Events

Event	Params	Description
`select`	`(emoji) => {}`	Emitted when an emoji is selected
`skin-change`	`(skin) => {}`	Emitted when the skin tone changes

emoji-mart-vue-fast

What's inside emoji-mart-vue-fast

Import Default Styles

Self-hosting Emoji Sheets

Constructor Options

Example: Filtering and Custom Emojis

Props

Events

Basic Usage

Common Props

Events