{"id":16458134,"url":"https://github.com/dczajkowski/vue-emoji-picker","last_synced_at":"2025-05-16T19:02:59.733Z","repository":{"id":30998508,"uuid":"126599592","full_name":"DCzajkowski/vue-emoji-picker","owner":"DCzajkowski","description":"Very simple, yet powerful, vue emoji picker 🎉🔥🚀","archived":false,"fork":false,"pushed_at":"2023-06-24T11:27:33.000Z","size":1048,"stargazers_count":325,"open_issues_count":6,"forks_count":49,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-01-19T02:04:18.357Z","etag":null,"topics":["emoji-picker","emojis","hacktoberfest","vue","vue-plugin","vue2","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DCzajkowski.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-03-24T13:01:12.000Z","updated_at":"2023-12-22T01:16:23.000Z","dependencies_parsed_at":"2024-01-02T23:41:37.756Z","dependency_job_id":null,"html_url":"https://github.com/DCzajkowski/vue-emoji-picker","commit_stats":{"total_commits":31,"total_committers":4,"mean_commits":7.75,"dds":"0.12903225806451613","last_synced_commit":"b7010e28bc3ed7392d6b7f96241f1f570204ba8f"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCzajkowski%2Fvue-emoji-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCzajkowski%2Fvue-emoji-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCzajkowski%2Fvue-emoji-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DCzajkowski%2Fvue-emoji-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DCzajkowski","download_url":"https://codeload.github.com/DCzajkowski/vue-emoji-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248606859,"owners_count":21132428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emoji-picker","emojis","hacktoberfest","vue","vue-plugin","vue2","vuejs","vuejs2"],"created_at":"2024-10-11T10:44:19.120Z","updated_at":"2025-04-12T17:37:50.750Z","avatar_url":"https://github.com/DCzajkowski.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Highly-customizable emoji picker for Vue 2\n\u003ca href=\"https://www.npmjs.com/package/vue-emoji-picker\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vue-emoji-picker.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-emoji-picker\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-emoji-picker.svg\" alt=\"Version\"\u003e\u003c/a\u003e\n\u003ca href=\"https://spdx.org/licenses/MIT.html\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vue-emoji-picker.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\n## Table of contents\n- [Demo](#demo)\n- [Installation](#installation)\n  - [With npm](#with-npm)\n  - [With a CDN](#with-a-cdn)\n- [Import](#import)\n  - [With an ES6 bundler (via npm)](#with-an-es6-bundler-via-npm)\n    - [Use per component](#use-per-component)\n    - [Use globally](#use-globally)\n  - [Using a CDN](#using-a-cdn)\n- [Usage](#usage)\n  - [Very simple usage, without any CSS defined](#very-simple-usage-without-any-css-defined)\n  - [CSS-styled example](#css-styled-example)\n- [Available props](#available-props)\n- [License](#license)\n\n\n## Demo\nThe live demos are available here:\n- [Simple, html-only demo](https://codepen.io/DCzajkowski/pen/JLypqP),\n- [Complete, css-styled demo](https://codepen.io/DCzajkowski/pen/jzLzWp),\n- [TailwindCSS-styled demo](https://codepen.io/DCzajkowski/pen/Brxvzj).\n\n## Installation\n### With npm\n```bash\nnpm i vue-emoji-picker --save\n```\n\n### With a CDN\n```html\n\u003cscript src=\"https://unpkg.com/vue-emoji-picker/dist/vue-emoji-picker.js\"\u003e\u003c/script\u003e\n```\n\n## Import\n### With an ES6 bundler (via npm)\n```js\nimport { EmojiPicker } from 'vue-emoji-picker'\n\nexport default {\n  // ...\n  components: {\n    EmojiPicker,\n  },\n  // ...\n}\n```\n\n### Using a CDN\n```html\n\u003cscript\u003e\n  new Vue({\n    components: {\n      EmojiPicker: window.EmojiPicker,\n    },\n  })\n\u003c/script\u003e\n```\n\n## Usage\nvue-emoji-picker is a slot-based component, to provide maximum flexibility.\nSince every ounce of html is created by a consumer (ie. you), you can customize every piece of the component as you wish.\n\n### Very simple usage, without any CSS defined\nYou will need two things. A textarea (or an input), where emojis will be injected, and a component declaration. A simple example is provided below.\n```html\n\u003ctextarea v-model=\"input\"\u003e\u003c/textarea\u003e\n\n\u003cemoji-picker @emoji=\"insert\" :search=\"search\"\u003e\n  \u003cdiv slot=\"emoji-invoker\" slot-scope=\"{ events: { click: clickEvent } }\" @click.stop=\"clickEvent\"\u003e\n    \u003cbutton type=\"button\"\u003eopen\u003c/button\u003e\n  \u003c/div\u003e\n  \u003cdiv slot=\"emoji-picker\" slot-scope=\"{ emojis, insert, display }\"\u003e\n    \u003cdiv\u003e\n      \u003cdiv\u003e\n        \u003cinput type=\"text\" v-model=\"search\"\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cdiv v-for=\"(emojiGroup, category) in emojis\" :key=\"category\"\u003e\n          \u003ch5\u003e{{ category }}\u003c/h5\u003e\n          \u003cdiv\u003e\n            \u003cspan\n              v-for=\"(emoji, emojiName) in emojiGroup\"\n              :key=\"emojiName\"\n              @click=\"insert(emoji)\"\n              :title=\"emojiName\"\n            \u003e{{ emoji }}\u003c/span\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/emoji-picker\u003e\n```\n\n```js\n{\n  data() {\n    return {\n      input: '',\n      search: '',\n    }\n  },\n  methods: {\n    insert(emoji) {\n      this.input += emoji\n    },\n  },\n}\n```\n\nAs you may see, you have to declare some things yourself. Namely:\n- `input` - a model for your input/textarea,\n- `search` - a model for the search box inside the component (optional),\n- `insert(emoji)` - a method responsible to put emojis into your input/textarea. Provided `emoji` is a string representation of the emoji to be inserted.\n\n### CSS-styled example\nTo see what is possible with the component, you can simply have a look at a demo available [here](https://codepen.io/DCzajkowski/pen/jzLzWp).\n\n## Available props\n- `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`.\n- `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.\n\n## Slots\n- `emoji-invoker`\n  - `events` - delares the `v-on:click` toggle of the picker box,\n- `emoji-picker`\n  - `emojis` - object of unicode emojis,\n  - `insert()` - method to be invoked when an emoji is clicked,\n  - `display` - object containting `x`, `y` and `visible` properties.\n\n## License\nThis work is an open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdczajkowski%2Fvue-emoji-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdczajkowski%2Fvue-emoji-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdczajkowski%2Fvue-emoji-picker/lists"}