vue-emoji-mart

Vue Emoji Mart is a Slack-like customizable
emoji picker component for Vue, inspired by [Emoji Mart](https://github.com/missive/emoji-mart).
Demo • Changelog


Brought to you by the Missive team

Installation

npm install --save vue-emoji-mart

Components

Picker

<template>
  <div>
    <Picker
      :emoji-size="emojiSize"
      :per-line="perLine"
      :skins="skin"
      :native="native"
      :set="set"
      :auto-focus="autoFocus"
      :include="include"
      :exclude="exclude"
      :onItemClick="insertSymbol"
    />
  </div>
</template>
<script>
import 'vue-emoji-mart/css/emoji-mart.css'
import { Picker } from 'vue-emoji-mart'
 
export default {
  data () {
    return {
      emojiSize: 24,
      perLine: 9,
      skin: 1,
      native: true,
      set: 'apple',
      hidden: false,
      currentEmoji: { id: '+1' },
      autoFocus: false,
      include: [],
      exclude: [],
    }
  },
  methods: {
    insertSymbol (emoji) {
      console.log(emoji)
    }
  }
}
</script> 

Prop	Required	Default	Description
autoFocus		false	Auto focus the search input when mounted
color		#ae65c5	The top bar anchors select and hover color
emoji		department_store	The emoji shown when no emojis are hovered, set to an empty string to show nothing
include		[]	Only load included categories. Accepts I18n categories keys. Order will be respected, except for the recent category which will always be the first.
exclude		[]	Don't load excluded categories. Accepts I18n categories keys.
custom		[]	Custom emojis
emojiSize		24	The emoji width and height
onClick			Params: (emoji, event) => {}
perLine		9	Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set Frequently Used length as well (perLine * 4)
i18n		{…}	An object containing localized strings
native		false	Renders the native unicode emoji
set		apple	The emoji set: 'apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook'
sheetSize		64	The emoji sheet size: 16, 20, 32, 64
backgroundImageFn		((set, sheetSize) => …)	A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally.
emojisToShowFilter		((emoji) => true)	A Fn to choose whether an emoji should be displayed or not
skin		1	Default skin color: 1, 2, 3, 4, 5, 6
style			Inline styles applied to the root element. Useful for positioning
title		Emoji Mart™	The title shown when no emojis are hovered

I18n

search: 'Search',
notfound: 'No Emoji Found',
categories: {
  search: 'Search Results',
  recent: 'Frequently Used',
  people: 'Smileys & People',
  nature: 'Animals & Nature',
  foods: 'Food & Drink',
  activity: 'Activity',
  places: 'Travel & Places',
  objects: 'Objects',
  symbols: 'Symbols',
  flags: 'Flags',
  custom: 'Custom',
}

Development

$ yarn run build:data
$ yarn start
$ open example/index.html

🎩 Hat tips!

Powered by iamcal/emoji-data and inspired by iamcal/js-emoji.
🙌🏼  Cal Henderson.

Missive mixes team email and threaded group chat for productive teams.
A single app for all your internal and external communication and a full work management solution.