v-emoji-picker

V-Emoji-Picker

This simple package using Emojis Natives

Table of contents

• Installation
• Usage
• Demo

Installation

yarn add v-emoji-picker

Usage

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

<script>
import VEmojiPicker from 'v-emoji-picker';
import packEmoji from "v-emoji-picker/data/emojis.js";

export default {
  name: 'Demo',
  components: {
    VEmojiPicker
  },
  data: () => ({
    emojisNatives: packEmoji
  }),
  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 itens with Interface IEmoji

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

set in Prop customEmojis

Using custom Categories

• Array of itens with Interface ICategory

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

set in Prop customCategories

Updates version 2

• Prop customEmojis
• Prop customCategories
• Prop exceptCategories
• Support to Emojis SVG/Img/Natives (text)

Migrate to version 2

• Folder /data removed
• Prop pack removed (async auto import default emojis natives - text)
• Prop showCategory changed to showCategories

Structure Emoji

License