Press "Enter" to skip to content

A Lightweight Modern Emoji Picker Component For Vue | vuemoji-picker

vuemoji-picker is a simple Vue 2 and 3 emoji picker element plugin. It is a modern web component for the web emoji picker.

vanilla javascript emoji picker, bootstrap emoji picker demo, jquery emoji picker textarea, emoji gif picker html, vue emoji picker, javascript emoji library, jquery emoji picker

How to make use of it:

1. Import the cover component.

import { defineComponent, ref } from 'vue'
import { VuemojiPicker, EmojiClickEventDetail, VuemojiPickerStyle } from 'vuemoji-picker';
<template>
  <VuemojiPicker :picker-style="style" @emojiClick="handleEmojiClick" />
</template>

2. Create an emoji picker.

<template>
  <VuemojiPicker :picker-style="style" @emojiClick="handleEmojiClick" />
</template>
export default defineComponent({
  components: { VuemojiPicker },
  setup() {
    const handleEmojiClick = (detail: EmojiClickEventDetail) => {
      // do something
    }
    const style = ref<VuemojiPickerStyle>({
      borderSize: '2px',
      buttonActiveBackground: '#e6e6e6'
    })
    return {
      handleEmojiClick,
      style
    }
  }
})

3. Props are available.

isDark: {
  type: Boolean,
  required: false,
  default: isDarkMode()
},
skinToneEmoji: String,
customEmoji: Array as PropType<PickerConstructorOptions['customEmoji']>,
dataSource: String,
locale: String,
customCategorySorting: Function as PropType<(a: string, b: string) => number>,
i18n: Object as PropType<PickerConstructorOptions['i18n']>,
pickerStyle: Object as PropType<VuemojiPickerStyle>

Modern Emoji Picker Component For Vue, vuemoji-picker Plugin/Github


See Demo And Download

Official Website(wobsoriano): Click Here

This superior jQuery/javascript plugin is developed by wobsoriano. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.