vuemoji-picker

A simple Vue 2 and 3 wrapper component for emoji-picker-element.

Live Demo

Install

npm install vuemoji-picker

Usage

<script setup lang="ts">
import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'

const handleEmojiClick = (detail: EmojiClickEventDetail) => {}
</script>

<template>
    <VuemojiPicker @emojiClick="handleEmojiClick" />
</template>

Props

Name | Type | Default | Description | ------ | ------ | ------ | ------ | isDark | Boolean | system | Set picker theme | customCategorySorting | Function | - | Function to sort custom category strings (sorted alphabetically by default) | customEmoji | CustomEmoji[] | - | Array of custom emoji | dataSource | String | "https://cdn.jsdelivr.net/npm/emoji-picker-element-data@^1/en/emojibase/data.json" | URL to fetch the emoji data from | i18n | I18n | - | i18n object (see details) | locale | String | "en" | Locale string | skinToneEmoji | String | "🖐️" | The emoji to use for the skin tone picker | pickerStyle | VuemojiPickerStyle | - | style object (see available options) |

Events

Name | Type | Default | Description | ------ | ------ | ------ | ------ | emojiClick | Function | - | Fired when an emoji is selected | skinToneChange | Function | - | Fired when a new skin tone is selected |

Composables

Set of composables that wraps Database API methods.

<script setup>
import { ref } from 'vue'
import {
  useEmojiByGroup,
  useEmojiBySearchQuery,
  useEmojiByShortcode,
  useEmojiByUnicodeOrName
} from 'vuemoji-picker'

const query = ref('elephant')
const { result, loading } = useEmojiBySearchQuery(query)
</script>

For more information about available styling and offline config, please read emoji-picker-element's docs.

License

MIT - Copyright (c) 2021 Robert Soriano