https://github.com/wobsoriano/vuemoji-picker

Vue 2 and 3 lightweight emoji picker.
https://github.com/wobsoriano/vuemoji-picker

emoji emoji-picker vue

Last synced: 5 days ago
JSON representation

Vue 2 and 3 lightweight emoji picker.

• Host: GitHub
• URL: https://github.com/wobsoriano/vuemoji-picker
• Owner: wobsoriano
• License: mit
• Created: 2021-07-23T18:18:05.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-28T00:33:14.000Z (10 months ago)
• Last Synced: 2024-05-01T16:36:51.764Z (8 months ago)
• Topics: emoji, emoji-picker, vue
• Language: TypeScript
• Homepage: https://vuemoji-picker.vercel.app
• Size: 220 KB
• Stars: 68
• Watchers: 3
• Forks: 5
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# vuemoji-picker

A simple Vue 2 and 3 wrapper component for [emoji-picker-element](https://github.com/nolanlawson/emoji-picker-element).

[Live Demo](https://vuemoji-picker.vercel.app/)

![Demo of vuemoji-picker](https://i.imgur.com/6CcJxLW.gif)

## Install

```bash

npm install vuemoji-picker

```

## Usage

```html

import { VuemojiPicker, EmojiClickEventDetail } from 'vuemoji-picker'

const handleEmojiClick = (detail: EmojiClickEventDetail) => {}

    

```

## Props

Name | Type | Default | Description |

------ | ------ | ------ | ------ |

`isDark` | `Boolean` | system | Set picker theme  |

`customCategorySorting` | `Function` | - | Function to sort custom category strings (sorted alphabetically by default)  |

`customEmoji` | `CustomEmoji[]` | - | Array of custom emoji |

`dataSource` | `String` | "https://cdn.jsdelivr.net/npm/emoji-picker-element-data@^1/en/emojibase/data.json" | URL to fetch the emoji data from |

`i18n` | `I18n` | - | i18n object ([see details](https://github.com/nolanlawson/emoji-picker-element#i18n-structure)) |

`locale` | `String` | "en" | Locale string |

`skinToneEmoji` | `String` | "🖐️" | The emoji to use for the skin tone picker |

`pickerStyle` | `VuemojiPickerStyle` | - | [style object](https://github.com/nolanlawson/emoji-picker-element#styling) ([see available options](https://github.com/wobsoriano/vuemoji-picker/blob/master/packages/lib/src/index.ts#L4)) |

## Events

Name | Type | Default | Description |

------ | ------ | ------ | ------ |

`emojiClick` | `Function` | - | Fired when an emoji is selected  |

`skinToneChange` | `Function` | - | Fired when a new skin tone is selected  |

## Composables

Set of composables that wraps [Database API](https://github.com/nolanlawson/emoji-picker-element#database) methods.

```vue

import { ref } from 'vue'

import {

  useEmojiByGroup,

  useEmojiBySearchQuery,

  useEmojiByShortcode,

  useEmojiByUnicodeOrName

} from 'vuemoji-picker'

const query = ref('elephant')

const { result, loading } = useEmojiBySearchQuery(query)

```

For more information about available styling and offline config, please read [emoji-picker-element's docs](https://github.com/nolanlawson/emoji-picker-element).

## License

MIT - Copyright (c) 2021 [Robert Soriano](https://github.com/wobsoriano)