vuemoji-picker
A simple Vue 2 and 3 wrapper component for emoji-picker-element.
Install
pnpm add vuemoji-pickerUsage
<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 |
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.
License
MIT - Copyright (c) 2021 Robert Soriano