npm install vue3-emoji-picker
// or
yarn add vue3-emoji-picker
Important note: If you're using TypeScript, don't forget to add declare module 'vue3-emoji-picker' in your .d.ts file
// import picker compopnent import EmojiPicker from 'vue3-emoji-picker' // import css import 'vue3-emoji-picker/css' // or import directly: // import'node_modules/vue3-emoji-picker/dist/style.css'
// use picker component <EmojiPicker :native="true" @select="onSelectEmoji" />
// event callback
function onSelectEmoji(emoji) {
console.log(emoji)
/*
// result
{
i: "😚",
n: ["kissing face"],
r: "1f61a", // with skin tone
t: "neutral", // skin tone
u: "1f61a" // without tone
}
*/
} Prop Type Default Value Description native Boolean false Load native emoji instead of image. hide-search Boolean false Show/hide search input. hide-group-icons Boolean false Show/hide header group icons. hide-group-names Boolean false Show/hide group names. disable-sticky-group-names Boolean false Disable sticky for group names disable-skin-tones Boolean false Disable skin tones. disabled-groups Array [] Disable any group/category. See Available groups group-names Object {} Change any group name. See Default group names static-texts Object Object See static-texts table pickerType string '' Choose picker type, possible options: input, textarea (Popup with input/textarea), '' mode string 'insert' Choose insert mode, possible options: prepend, insert, append offset Number '6' Choose emoji popup offset additional-groups Object {} Add additional customized groups, keys are the group names translated from snake_case group-order Array [] Override ordering of groups group-icons Object {} Override group icons by passing svg's on keys display-recent Boolean false Display Recently used emojis theme String 'light' Available options, 'light', 'dark', and 'auto' Static text option (props['static-texts']) Prop Type Default Value Description placeholder String Search emoji Update search input placeholder text. skinTone String Skin tone Footer skin tone button text.
Example: :static-texts="{ placeholder: 'Search emoji'}"
This event fires when an emoji gets selected/clicked.
Event callback will receive selected emoji in the first argument.
<EmojiPicker @select="onSelectEmoji" />
function onSelectEmoji(emoji) { /* do something */ }
This event fires when input text gets changed.
Event callback will receive the text in the first argument.
<EmojiPicker @update:text="onChangeText" />
function onChangeText(text) { /* do something */ }
[ "smileys_people", "animals_nature", "food_drink", "activities", "travel_places", "objects", "symbols", "flags" ]
{
"smileys_people": "Smiles & People",
"animals_nature": "Animals & Nature",
"food_drink": "Food & Drink",
"activities": "Activities",
"travel_places": "Travel places",
"objects": "Objects",
"symbols": "Symbols",
"flags": "Flags",
"recent": "Recently used"
}
<picker :group-names="{ smileys_people: 'My customized group name' }" />
<template>
<picker :group-icons="{ smileys_people: customSVG }" />
</template>
<script setup>
import customSVG from './path/to/svg'
</script>
This will make it so flags is first and then any other non-defined group will follow.
<picker :group-order="['flags']" />
To see any existing emoji's see src/data/emojis.json
<picker
:additional-groups="{
my_custom_group: [
{ n: ['grinning face', 'grinning'], u: '1f600' },
{ n: ['grinning face with smiling eyes', 'grin'], u: '1f601' },
],
}"
:group-names="{ my_custom_group: 'Frequently used' }"
/>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4