Javascript Vue

Vue 2 and 3 lightweight emoji picker1 min read

vuemoji-picker

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

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/[email protected]^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.

React Admin Templates and Themes

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest