Skip to content

soundengineering/vue3-discordpicker

 
 

Repository files navigation

vue3-discord-picker


VueJS TailwindCSS

NPM

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.

Install

npm install vue3-discordpicker

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://rvrb.one/vue-discord-emojipicker/categories/%REPLACE%.svg transform into https://rvrb.one/vue-discord-emojipicker/categories/animals.svg`) "variation": String (same at category, example: https://rvrb.one/vue-discord-emojipicker/variations/variation_%REPLACE%.svg transform into https://rvrb.one/vue-discord-emojipicker/variations/variation_0.svg (0 - 4))

Categories

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 89.7%
  • JavaScript 7.8%
  • HTML 2.3%
  • CSS 0.2%