Awesome Open Source
Awesome Open Source

Highly-customizable emoji picker for Vue 2

Downloads Version License

Table of contents

Demo

The live demos are available here:

Installation

With npm

npm i vue-emoji-picker --save

With a CDN

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

Import

With an ES6 bundler (via npm)

Use per component

import EmojiPicker from 'vue-emoji-picker'

export default {
  // ...
  components: {
    EmojiPicker,
  },
  // ...
}

Use globally

import { EmojiPickerPlugin } from 'vue-emoji-picker'
Vue.use(EmojiPickerPlugin)

Using a CDN

<script>
  Vue.use(EmojiPicker)

  new Vue({
    // ...
  })
</script>

Usage

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.

Very simple usage, without any CSS defined

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.

<textarea v-model="input"></textarea>

<emoji-picker @emoji="insert" :search="search">
  <div slot="emoji-invoker" slot-scope="{ events: { click: clickEvent } }" @click.stop="clickEvent">
    <button type="button">open</button>
  </div>
  <div slot="emoji-picker" slot-scope="{ emojis, insert, display }">
    <div>
      <div>
        <input type="text" v-model="search">
      </div>
      <div>
        <div v-for="(emojiGroup, category) in emojis" :key="category">
          <h5>{{ category }}</h5>
          <div>
            <span
              v-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. Provided emoji is a string representation of the emoji to be inserted.

CSS-styled example

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

Available props

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

Slots

  • emoji-invoker
    • events - delares the v-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 containting x, y and visible properties.

License

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,552,287) 
Vue (84,303) 
Vuejs (9,913) 
Vuejs2 (2,650) 
Vue2 (1,566) 
Emojis (250) 
Vue Plugin (219) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194