vuemoji-picker

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

vuemoji-picker

View Demo View Github

Install

yarn add vuemoji-picker

Usage

Options API

<template>
  <div id="app">
    <VuemojiPicker @emojiClick="handleEmojiClick" />
  </div>
</template>

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

export default Vue.extend({
  components: {
    VuemojiPicker
  },
  methods: {
    handleEmojiClick(detail: EmojiClickEventDetail) {}
  }
});
</script>

Composition API

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

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

export default defineComponent({
    components: { VuemojiPicker },
    setup() {
        const handleEmojiClick = (detail: EmojiClickEventDetail) => {}

        return {
            handleEmojiClick
        }
    }
})
</script>

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

Database API Composable

Use the Database API as a composable.

import { defineComponent } from 'vue' // @vue/composition-api for Vue 2
import { useDatabase } from 'vuemoji-picker'

export default defineComponent({
    setup() {
        const database = useDatabase()
        
        const searchEmoji = async () => {
            const result = await database.getEmojiBySearchQuery('elephant')
            // [{unicode: "?", ...}]
        }

        return {
            searchEmoji
        }
    }
})

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