vue-emoji-mart-picker

Vue Emoji Mart Picker is a simple WYSIWYG editor component with emoji picker for VueJS that based on jm-david/emoji-mart-vue

View Demo

Installation

npm install --save vue-emoji-mart-picker

Usage

import PickerArea from 'vue-emoji-mart-picker'

<picker-area v-model="myValue" set="messenger" />
<picker-area v-model="myOtherValue" :inline="true" />
<picker-area title="Pick your emoji…" emoji="point_up" />
<picker-area :i18n="{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }" />

Prop	Default	Description
inline	`false`	Display editor as single line input
pickerPosition	`bottom`	The position of the emoji picker
placeholder	`""`	The placeholder of the editor
emoji	`point_up`	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.
emojiSize	`24`	The emoji width and height
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
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.
showPreview	`true`	Display preview section
showCategories	`true`	Display categories
showSkinTones	`true`	Display skin tones picker
emojiTooltip	`false`	Show emojis short name when hovering (title)
title	`Pick your emoji...`	The title shown when no emojis are hovered
infiniteScroll	`true`	Scroll continuously through the categories

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',
}

Sheet sizes

Sheets are served from jsdelivr.

Set	Size (`sheetSize: 16`)	Size (`sheetSize: 20`)	Size (`sheetSize: 32`)	Size (`sheetSize: 64`)
apple	334 KB	459 KB	1.08 MB	2.94 MB
emojione	315 KB	435 KB	1020 KB	2.33 MB
facebook	322 KB	439 KB	1020 KB	2.50 MB
google	301 KB	409 KB	907 KB	2.17 MB
messenger	325 KB	449 KB	1.05 MB	2.69 MB
twitter	288 KB	389 KB	839 KB	1.82 MB

Development

npm install
npm run dev

tungquach / vue-emoji-mart-picker

readme