Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/delowardev/vue3-emoji-picker
Simple and Powerful Emoji Picker for Vue3
https://github.com/delowardev/vue3-emoji-picker
emoji picker vue vue3
Last synced: about 1 month ago
JSON representation
Simple and Powerful Emoji Picker for Vue3
- Host: GitHub
- URL: https://github.com/delowardev/vue3-emoji-picker
- Owner: delowardev
- License: mit
- Created: 2021-10-15T04:54:09.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-18T12:44:19.000Z (6 months ago)
- Last Synced: 2024-06-19T03:02:29.467Z (6 months ago)
- Topics: emoji, picker, vue, vue3
- Language: Vue
- Homepage: https://codesandbox.io/p/github/delowardev/vue3-emoji-picker/main?file=%2FREADME.md
- Size: 469 KB
- Stars: 168
- Watchers: 4
- Forks: 34
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Vue3 Emoji Picker. [Live preview](https://codesandbox.io/p/github/delowardev/vue3-emoji-picker/main?file=%2FREADME.md)
[](https://github.com/delowardev/vue3-emoji-picker/actions/workflows/TestAutomation.yaml)
[](https://badge.fury.io/js/vue3-emoji-picker)
[](https://www.npmjs.com/package/vue3-emoji-picker)
## Installation:
```
npm install vue3-emoji-picker
// or
yarn add vue3-emoji-picker
```
_Important note: If you're using TypeScript, don't forget to add `declare module 'vue3-emoji-picker'` in your `.d.ts` file_
## Usage:
```javascript
// import picker compopnent
import EmojiPicker from 'vue3-emoji-picker'
// import css
import 'vue3-emoji-picker/css'
// or import directly:
// import'node_modules/vue3-emoji-picker/dist/style.css'
```
```vue
// use picker component
```
```javascript
// event callback
function onSelectEmoji(emoji) {
console.log(emoji)
/*
// result
{
i: "😚",
n: ["kissing face"],
r: "1f61a", // with skin tone
t: "neutral", // skin tone
u: "1f61a" // without tone
}
*/
}
```
## Options (`props`)
| Prop | Type | Default Value | Description |
| :------------------------- | :------ | :------------ | :------------------------------------------------------------------------------------------ |
| native | Boolean | false | Load native emoji instead of image. |
| hide-search | Boolean | false | Show/hide search input. |
| hide-group-icons | Boolean | false | Show/hide header group icons. |
| hide-group-names | Boolean | false | Show/hide group names. |
| disable-sticky-group-names | Boolean | false | Disable sticky for group names |
| disable-skin-tones | Boolean | false | Disable skin tones. |
| disabled-groups | Array | [] | Disable any group/category. See [Available groups](#available-groups) |
| group-names | Object | {} | Change any group name. See [Default group names](#default-group-names) |
| static-texts | Object | Object | See [static-texts](#propsstatic-texts) table |
| pickerType | string | '' | Choose picker type, possible options: `input`, `textarea` (Popup with input/textarea), `''` |
| mode | string | 'insert' | Choose insert mode, possible options: `prepend`, `insert`, `append` |
| offset | Number | '6' | Choose emoji popup offset |
| additional-groups | Object | {} | Add additional customized groups, keys are the group names translated from snake_case |
| group-order | Array | [] | Override ordering of groups |
| group-icons | Object | {} | Override group icons by passing svg's on keys |
| display-recent | Boolean | false | Display Recently used emojis |
| theme | String | 'light' | Available options, 'light', 'dark', and 'auto' |
## Static text option (`props['static-texts']`)
| Prop | Type | Default Value | Description |
| :---------- | :----- | :------------ | :------------------------------------ |
| placeholder | String | Search emoji | Update search input placeholder text. |
| skinTone | String | Skin tone | Footer skin tone button text. |
Example:
`:static-texts="{ placeholder: 'Search emoji'}" `
## Events / Callbacks
### `@select`
This event fires when an emoji gets selected/clicked.
Event callback will receive selected emoji in the first argument.
```
function onSelectEmoji(emoji) { /* do something */ }
```
### `@update:text`
This event fires when input text gets changed.
Event callback will receive the text in the first argument.
```
function onChangeText(text) { /* do something */ }
```
## Available groups
```json
[
"smileys_people",
"animals_nature",
"food_drink",
"activities",
"travel_places",
"objects",
"symbols",
"flags"
]
```
## Default group names
```json
{
"smileys_people": "Smiles & People",
"animals_nature": "Animals & Nature",
"food_drink": "Food & Drink",
"activities": "Activities",
"travel_places": "Travel places",
"objects": "Objects",
"symbols": "Symbols",
"flags": "Flags",
"recent": "Recently used"
}
```
## Overriding group names
```vue
```
## Overriding group icons
```vue
import customSVG from './path/to/svg'
```
## Override group order
This will make it so flags is first and then any other non-defined group will follow.
```vue
```
## Add additional groups
To see any existing emoji's see `src/data/emojis.json`
```vue
```