Skip to content

wobsoriano/vuemoji-picker

Repository files navigation

vuemoji-picker

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

Live Demo

Demo of vuemoji-picker

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