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 | Required | 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

🎩 Hat tips

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