1.0.8 • Published 5 years ago
vue-emoji-mart-picker v1.0.8
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
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 |
322 KB | 439 KB | 1020 KB | 2.50 MB | |
301 KB | 409 KB | 907 KB | 2.17 MB | |
messenger | 325 KB | 449 KB | 1.05 MB | 2.69 MB |
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.