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