Repository files navigation

• Demo
• Installation
  • With npm
  • With a CDN
• Import
  • With an ES6 bundler (via npm)
    • Use per component
    • Use globally
  • Using a CDN
• Usage
  • Very simple usage, without any CSS defined
  • CSS-styled example
• Available props
• License

The live demos are available here:

• Simple, html-only demo,
• Complete, css-styled demo,
• TailwindCSS-styled demo.

npm i vue-emoji-picker --save

<scriptsrc="https://unpkg.com/vue-emoji-picker/dist/vue-emoji-picker.js"></script>

import{EmojiPicker}from'vue-emoji-picker'exportdefault{// ...components:{    EmojiPicker,},// ...}

<script>newVue({components:{EmojiPicker:window.EmojiPicker,},})</script>

vue-emoji-picker is a slot-based component, to provide maximum flexibility.Since every ounce of html is created by a consumer (ie. you), you can customize every piece of the component as you wish.

You will need two things. A textarea (or an input), where emojis will be injected, and a component declaration. A simple example is provided below.

<textareav-model="input"></textarea><emoji-picker@emoji="insert":search="search"><divslot="emoji-invoker"slot-scope="{ events: { click: clickEvent } }"@click.stop="clickEvent"><buttontype="button">open</button></div><divslot="emoji-picker"slot-scope="{ emojis, insert, display }"><div><div><inputtype="text"v-model="search"></div><div><divv-for="(emojiGroup, category) in emojis":key="category"><h5>{{ category }}</h5><div><spanv-for="(emoji, emojiName) in emojiGroup":key="emojiName"@click="insert(emoji)":title="emojiName">{{ emoji }}</span></div></div></div></div></div></emoji-picker>

{data(){return{input:'',search:'',}},methods:{insert(emoji){this.input+=emoji},},}

As you may see, you have to declare some things yourself. Namely:

• input - a model for your input/textarea,
• search - a model for the search box inside the component (optional),
• insert(emoji) - a method responsible to put emojis into your input/textarea. Providedemoji is a string representation of the emoji to be inserted.

To see what is possible with the component, you can simply have a look at a demo availablehere.

• searchoptional - If you are not using the search functionality, you can omit this one. It should be a model of the search passed from yourdata.
• emojiTableoptional - You can overwrite thedefault emoji table by providing your own.

• emoji-invoker
  • events - delares thev-on:click toggle of the picker box,
• emoji-picker
  • emojis - object of unicode emojis,
  • insert() - method to be invoked when an emoji is clicked,
  • display - object containtingx,y andvisible properties.

This work is an open-sourced software licensed under theMIT license.