v-emoji-picker

V-Emoji-Picker

This simple package using Emojis Natives

---

Contents

• Installation
• Usage
• Props
• Events
• Updates v2
• Migrate v2
• Using SVG
• Structure emoji

---

Installation

yarn add v-emoji-picker

Usage

<template>
  <div id="app">
    <VEmojiPicker @select="selectEmoji" />
  </div>
</template>

<script>
import VEmojiPicker from 'v-emoji-picker';

export default {
  name: 'Demo',
  components: {
    VEmojiPicker
  },
  data: () => ({}),
  methods: {
    selectEmoji(emoji) {
      console.log(emoji)
    }
  }
}
</script>

or Global

import Vue from "vue";
import App from "./App.vue";

import { VEmojiPicker } from 'v-emoji-picker';

Vue.config.productionTip = false;
Vue.use(VEmojiPicker);

new Vue({
  render: h => h(App)
}).$mount("#app");

Props

{
  @Prop({ default: () => [] as IEmoji[] }) customEmojis!: IEmoji[];
  @Prop({ default: () => [] as ICategory[] }) customCategories!: ICategory[];
  @Prop({ default: 5 }) emojisByRow!: number;
  @Prop({ default: false }) continuousList!: boolean;
  @Prop({ default: true }) showSearch!: boolean;
  @Prop({ default: true }) showCategories!: boolean;
  @Prop({ default: "Pesquisar..." }) labelSearch!: string;
  @Prop({ default: "Peoples" }) initalCategory!: string;
  @Prop({ default: () => [] as string[] }) exceptCategories!: string[];
}

Events

{
  select: 'Emit event on Selected Emoji',
  changeCategory: 'Emit event on Change Category'
}

Using custom Emojis

Array of items with Interface IEmoji

interface IEmoji {
  data: string;
  category: string;
  aliases: string[];
}

set in Prop customEmojis

Using custom Categories

Array of items with Interface ICategory

interface ICategory {
  name: string;
  icon: string;
}

set in Prop customCategories

Using SVG

Doc coming soon...

Updates version 2

• Prop customEmojis
• Prop customCategories
• Prop exceptCategories
• Folder /data removed
• Interface Emoji updated
• Support to Emojis SVG/Img/Natives (text)

Migrate to version 2

This was a one-time change to keep it clear and dynamic.

• Prop pack removed (async auto import default emojis natives - text)
• Prop showCategory changed to showCategories
• Event content event.emoji changed to emoji.data

Structure Emoji

License