https://github.com/joaoeudes7/v-emoji-picker

:star2: A Lightweight and customizable package of Emoji Picker in Vue using emojis natives (unicode).
https://github.com/joaoeudes7/v-emoji-picker

emoji emoji-natives emoticons lightweight typescript unicode unicode-emoji unicode-symbols vemoji-picker vue

Last synced: 7 months ago
JSON representation

:star2: A Lightweight and customizable package of Emoji Picker in Vue using emojis natives (unicode).

• Host: GitHub
• URL: https://github.com/joaoeudes7/v-emoji-picker
• Owner: joaoeudes7
• License: mit
• Created: 2019-01-25T11:13:09.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:09:55.000Z (almost 3 years ago)
• Last Synced: 2024-05-18T08:43:58.128Z (over 1 year ago)
• Topics: emoji, emoji-natives, emoticons, lightweight, typescript, unicode, unicode-emoji, unicode-symbols, vemoji-picker, vue
• Language: TypeScript
• Homepage: https://codesandbox.io/s/vue-example-emoji-picker-2-746pq
• Size: 3.28 MB
• Stars: 353
• Watchers: 4
• Forks: 62
• Open Issues: 36
• Metadata Files:
  • Readme: Readme.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-vue - v-emoji-picker - A Lightweight and customizable package of Emoji Picker in Vue using emojis natives (unicode). ` 📝 3 months ago` (UI Components [🔝](#readme))
• awesome-vue - v-emoji-picker - :star2: A Lightweight and customizable package of Emoji Picker in Vue using emojis natives (unicode). (Components & Libraries / UI Components)

README

          
# V-Emoji-Picker

This simple package using Emojis Natives

[![npm](https://img.shields.io/npm/v/v-emoji-picker.svg?style=flat-square)](https://www.npmjs.com/package/v-emoji-picker)

[![bundlephobia](https://img.shields.io/bundlephobia/minzip/v-emoji-picker.svg?style=flat-square)](https://bundlephobia.com/result?p=v-emoji-picker@latest)

[![npm](https://img.shields.io/npm/dm/v-emoji-picker.svg?style=flat-square)](https://www.npmjs.com/package/v-emoji-picker)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg?style=flat-square)](https://vuejs.org/)

[![CodeFactor](https://www.codefactor.io/repository/github/joaoeudes7/v-emoji-picker/badge?style=flat-square)](https://www.codefactor.io/repository/github/joaoeudes7/v-emoji-picker)

![example: Android](.demo.png)

---

## Contents

 - [V-Emoji-Picker](#v-emoji-picker)

 - [Contents](#contents)

 - [Installation](#installation)

 - [Usage](#usage)

 - [Props](#props)

 - [Events](#events)

 - [Using custom Emojis](#using-custom-emojis)

 - [Using custom Categories](#using-custom-categories)

 - [Using SVG](#using-svg)

 - [Structure Emoji](#structure-emoji)

 - [Size](#size)

 - [License](#license)

----

# Installation

```bash

yarn add v-emoji-picker

```

# Usage

```vue

  


    

  


import { VEmojiPicker } from 'v-emoji-picker';

export default {

  name: 'Demo',

  components: {

    VEmojiPicker

  },

  data: () => ({}),

  methods: {

    selectEmoji(emoji) {

      console.log(emoji)

    }

  }

}

```

or Global

```js

import Vue from "vue";

import App from "./App.vue";

import VEmojiPicker from 'v-emoji-picker';

Vue.config.productionTip = false;

Vue.use(VEmojiPicker);

new Vue({

  render: h => h(App)

}).$mount("#app");

```

## Props

```ts

{

  @Prop({ default: () => [] }) customEmojis!: IEmoji[];

  @Prop({ default: () => [] }) customCategories!: ICategory[];

  @Prop({ default: 15 }) limitFrequently!: number;

  @Prop({ default: 5 }) emojisByRow!: number;

  @Prop({ default: false }) continuousList!: boolean;

  @Prop({ default: 32 }) emojiSize!: number;

  @Prop({ default: true }) emojiWithBorder!: boolean;

  @Prop({ default: true }) showSearch!: boolean;

  @Prop({ default: true }) showCategories!: boolean;

  @Prop({ default: false }) dark!: boolean;

  @Prop({ default: "Peoples" }) initialCategory!: string;

  @Prop({ default: () => [] as ICategory[] }) exceptCategories!: ICategory[];

  @Prop({ default: () => [] as Emoji[] }) exceptEmojis!: IEmoji[];

  @Prop({}) i18n!: Object;

}

```

## Events

```js

{

  select: 'Emit event on Selected Emoji',

  changeCategory: 'Emit event on Change Category'

}

```

# Using custom Emojis

Array of items with `Interface IEmoji`

```js

interface IEmoji {

  data: string;

  category: string;

  aliases: string[];

}

```

set in Prop `customEmojis`

# Using custom Categories

Array of items with `Interface ICategory`

```js

interface ICategory {

  name: string;

  icon: string;

}

```

set in Prop `customCategories`

# Using SVG

Doc coming soon...

# i18n

Set in Prop `i18n` a object with structure of you custom translation:

```html

  

```

```js

const i18n = {

  search: 'Pesquisar...',

  categories: {

    Activity: "Atividades",

    Flags: "Bandeiras",

    Foods: "Comida",

    Frequently: "Frequentes",

    Objects: "Objetos",

    Nature: "Natureza",

    Peoples: "Pessoas",

    Symbols: "Símbolos",

    Places: "Locais"

  }

}

```

or import from `locale/lang/${youLang}`

Obs: Default language is en-UK

# Structure Emoji

![](.emoji.png)

# Size

![](.demo-size.png)

## License

[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fjoaoeudes7%2FV-Emoji-Picker.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fjoaoeudes7%2FV-Emoji-Picker?ref=badge_large)