# Getting Started
# Installation
For installing Vue Twemoji Picker dependency in your project use:
npm install @kevinfaguiar/vue-twemoji-picker
// OR
yarn add @kevinfaguiar/vue-twemoji-picker
# Using TwemojiPicker
This component, as explained previously, is only the emoji picker so it doesn't render emojis on its own. You need to pass as a prop to it the emoji dataset and use its events like @emojiUnicodeAdded to catch user interactions. Pre-compacted emoji datasets are available for use with this library.
Change {LANG} for one of the supported locales:
<template>
<twemoji-picker
:emojiData="emojiDataAll"
:emojiGroups="emojiGroups"
:skinsSelection="false"
:searchEmojisFeat="true"
searchEmojiPlaceholder="Search here."
searchEmojiNotFound="Emojis not found."
isLoadingLabel="Loading..."
></twemoji-picker>
</template>
<script>
import {
TwemojiPicker
} from '@kevinfaguiar/vue-twemoji-picker';
import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/{LANG}/emoji-all-groups.json';
import EmojiDataAnimalsNature from '@kevinfaguiar/vue-twemoji-picker/emoji-data/{LANG}/emoji-group-animals-nature.json';
import EmojiDataFoodDrink from '@kevinfaguiar/vue-twemoji-picker/emoji-data/{LANG}/emoji-group-food-drink.json';
import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
export default {
name: 'App',
components: {
'twemoji-picker': TwemojiPicker
},
computed: {
emojiDataAll() {
return EmojiAllData;
},
emojiGroups() {
return EmojiGroups;
}
}
}
</script>
For the component API entire documentation, click here.
# Using TwemojiTextarea
This component is the one used in the demo: is a textarea with a Twemoji Picker component integrated so you can easily prototype and test the rendering of the selected emojis into your app.
Change {LANG} for one of the supported locales:
<template>
<twemoji-textarea
:emojiData="emojiDataAll"
:emojiGroups="emojiGroups"
@enterKey="onEnterKey">
</twemoji-textarea>
</template>
<script>
import {
TwemojiTextarea
} from '@kevinfaguiar/vue-twemoji-picker';
import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/{LANG}/emoji-all-groups.json';
import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
export default {
name: 'App',
components: {
'twemoji-textarea': TwemojiTextarea
},
computed: {
emojiDataAll() {
return EmojiAllData;
},
emojiGroups() {
return EmojiGroups;
}
},
methods: {
onEnterKey(e) {
console.log("ClickedEnter", e);
}
}
}
</script>
For the component API entire documentation, click here.
# Using the UMD/IIFE Builds
- Version: 5.4.0 onwards
This project exports UMD/IIFE builds which can be used in any HTML/VANILLA JS project. Below is an example:
# Using the ESM Build
- Version: 5.4.0 onwards
This project exports a ESM build which can be used in any HTML/VANILLA JS project. Below is an example: