Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dczajkowski/vue-emoji-picker
Very simple, yet powerful, vue emoji picker 🎉🔥🚀
https://github.com/dczajkowski/vue-emoji-picker
emoji-picker emojis hacktoberfest vue vue-plugin vue2 vuejs vuejs2
Last synced: 12 days ago
JSON representation
Very simple, yet powerful, vue emoji picker 🎉🔥🚀
- Host: GitHub
- URL: https://github.com/dczajkowski/vue-emoji-picker
- Owner: DCzajkowski
- License: mit
- Created: 2018-03-24T13:01:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-06-24T11:27:33.000Z (over 1 year ago)
- Last Synced: 2024-01-19T02:04:18.357Z (10 months ago)
- Topics: emoji-picker, emojis, hacktoberfest, vue, vue-plugin, vue2, vuejs, vuejs2
- Language: TypeScript
- Homepage:
- Size: 1020 KB
- Stars: 325
- Watchers: 4
- Forks: 49
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Highly-customizable emoji picker for Vue 2
## Table of contents
- [Demo](#demo)
- [Installation](#installation)
- [With npm](#with-npm)
- [With a CDN](#with-a-cdn)
- [Import](#import)
- [With an ES6 bundler (via npm)](#with-an-es6-bundler-via-npm)
- [Use per component](#use-per-component)
- [Use globally](#use-globally)
- [Using a CDN](#using-a-cdn)
- [Usage](#usage)
- [Very simple usage, without any CSS defined](#very-simple-usage-without-any-css-defined)
- [CSS-styled example](#css-styled-example)
- [Available props](#available-props)
- [License](#license)
## Demo
The live demos are available here:
- [Simple, html-only demo](https://codepen.io/DCzajkowski/pen/JLypqP),
- [Complete, css-styled demo](https://codepen.io/DCzajkowski/pen/jzLzWp),
- [TailwindCSS-styled demo](https://codepen.io/DCzajkowski/pen/Brxvzj).
## Installation
### With npm
```bash
npm i vue-emoji-picker --save
```
### With a CDN
```html
```
## Import
### With an ES6 bundler (via npm)
```js
import { EmojiPicker } from 'vue-emoji-picker'
export default {
// ...
components: {
EmojiPicker,
},
// ...
}
```
### Using a CDN
```html
new Vue({
components: {
EmojiPicker: window.EmojiPicker,
},
})
```
## Usage
vue-emoji-picker is a slot-based component, to provide maximum flexibility.
Since every ounce of html is created by a consumer (ie. you), you can customize every piece of the component as you wish.
### Very simple usage, without any CSS defined
You will need two things. A textarea (or an input), where emojis will be injected, and a component declaration. A simple example is provided below.
```html
open
{{ category }}
{{ emoji }}
```
```js
{
data() {
return {
input: '',
search: '',
}
},
methods: {
insert(emoji) {
this.input += emoji
},
},
}
```
As you may see, you have to declare some things yourself. Namely:
- `input` - a model for your input/textarea,
- `search` - a model for the search box inside the component (optional),
- `insert(emoji)` - a method responsible to put emojis into your input/textarea. Provided `emoji` is a string representation of the emoji to be inserted.
### CSS-styled example
To see what is possible with the component, you can simply have a look at a demo available [here](https://codepen.io/DCzajkowski/pen/jzLzWp).
## Available props
- `search` _optional_ - If you are not using the search functionality, you can omit this one. It should be a model of the search passed from your `data`.
- `emojiTable` _optional_ - You can overwrite the [default](https://github.com/DCzajkowski/vue-emoji-picker/blob/master/src/emojis.ts) emoji table by providing your own.
## Slots
- `emoji-invoker`
- `events` - delares the `v-on:click` toggle of the picker box,
- `emoji-picker`
- `emojis` - object of unicode emojis,
- `insert()` - method to be invoked when an emoji is clicked,
- `display` - object containting `x`, `y` and `visible` properties.
## License
This work is an open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).