Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 3 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 (about 6 years ago)
Default Branch: master
Last Pushed: 2022-12-10T17:09:55.000Z (about 2 years ago)
Last Synced: 2024-05-18T08:43:58.128Z (9 months 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

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)