vue3-discord-picker

A new emoji / gif picker for your app ! Based on discord.

This components is available only in vue3.

🚧 Rework in typescript and composition-api soon.

Example

• Live demo 🎉
• Code demo 🎈

Install

npm i dxt-vue3-emojipicker

Global

import Vue from 'vue'
import DiscordPicker from 'vue3-discordpicker'

Vue.use(DiscordPicker, /* { default options with global component } */)

Local registration

import DiscordPicker from 'vue3-discordpicker'

export default {
  components: {
    DiscordPicker
  }
}

Props

| Name | Type | Default | Description | |----------|:-------------:|:------:|------:| | input | Boolean | false | Load input w/ autocomplete | | value | String, Number | null | v-model to input value | | categories | Array | true | Display the mask on first load | | gifFormat | String | | Return gif link with markdown format or html format (default: nothing) | | apiKey | String | | API_KEY tenor.com (free, register here: https://tenor.com/gifapi) (if no key: gif not appear) | | showUpload | Boolean | | Display upload icon at left (with emit method) | | showEmoji | Boolean | | Display emoji icon | | sources | Object | | Set new source url for all image |

Sources props

"search": String "gif": String "emoji": String "category": String (add %REPLACE% in your URL to change with slug, example: https://en-zo.dev/vue-discord-emojipicker/categories/%REPLACE%.svg transform into https://en-zo.dev/vue-discord-emojipicker/categories/animals.svg) "variation": String(same at category, example:https://raw.githubusercontent.com/dexterpedro/vue3-emojipicker/master/public/imgs/variation_%REPLACE%.svgtransform intohttps://raw.githubusercontent.com/dexterpedro/vue3-emojipicker/master/public/imgs/variation_0.svg` (0 - 4))

Categories

All categories list: ['people', 'animals', 'foods', 'travel', 'activities', 'objects', 'symbols', 'flags']