{"id":14990337,"url":"https://github.com/julien-marcou/unicode-emoji-picker","last_synced_at":"2025-05-08T21:21:31.922Z","repository":{"id":57386127,"uuid":"278620192","full_name":"Julien-Marcou/Unicode-Emoji-Picker","owner":"Julien-Marcou","description":"Customizable emoji picker web component, based on the Unicode Emoji specification","archived":false,"fork":false,"pushed_at":"2024-11-24T18:30:24.000Z","size":32,"stargazers_count":30,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T03:03:31.526Z","etag":null,"topics":["custom-element","emoji","emoticon","picker","smiley","unicode","web-component"],"latest_commit_sha":null,"homepage":"https://emoji.julien-marcou.fr","language":"JavaScript","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/Julien-Marcou.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-10T11:47:18.000Z","updated_at":"2024-11-24T18:20:19.000Z","dependencies_parsed_at":"2024-01-14T18:45:31.739Z","dependency_job_id":"13ed89fd-896f-4875-b3e7-da433c5c08e6","html_url":"https://github.com/Julien-Marcou/Unicode-Emoji-Picker","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"83ed6f7a3819accc0622e1609304c2cf5f225836"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Julien-Marcou%2FUnicode-Emoji-Picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Julien-Marcou%2FUnicode-Emoji-Picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Julien-Marcou%2FUnicode-Emoji-Picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Julien-Marcou%2FUnicode-Emoji-Picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Julien-Marcou","download_url":"https://codeload.github.com/Julien-Marcou/Unicode-Emoji-Picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253150081,"owners_count":21861830,"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":["custom-element","emoji","emoticon","picker","smiley","unicode","web-component"],"created_at":"2024-09-24T14:19:54.725Z","updated_at":"2025-05-08T21:21:31.905Z","avatar_url":"https://github.com/Julien-Marcou.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Unicode Emoji Picker\n\n[![NPM Package](https://img.shields.io/npm/v/unicode-emoji-picker?label=release\u0026color=%23cd2620\u0026logo=npm)](https://www.npmjs.com/package/unicode-emoji-picker)\n[![Unicode Emoji v16.0](https://img.shields.io/badge/emoji-v16.0-yellow?logo=unicode\u0026logoColor=yellow)](https://unicode.org/Public/emoji/16.0/)\n[![GitHub Repository](https://img.shields.io/github/stars/Julien-Marcou/Unicode-Emoji-Picker?color=%23f5f5f5\u0026logo=github)](https://github.com/Julien-Marcou/Unicode-Emoji-Picker)\n\n![Downloads per Month](https://img.shields.io/npm/dm/unicode-emoji-picker)\n![Gzip Size](https://img.shields.io/bundlephobia/minzip/unicode-emoji-picker?label=gzip%20size)\n![MIT License](https://img.shields.io/npm/l/unicode-emoji-picker)\n\nUnicode Emoji Picker is a custom element (Web Component) that allows you to pick an Emoji from the `Unicode Emoji` specification.\n\n```html\n\u003cunicode-emoji-picker\u003e\u003c/unicode-emoji-picker\u003e\n```\n\n\n## Demo\n\n[Check out the demo](https://emoji.julien-marcou.fr/)\n\n![Unicode Emoji Picker - Default theme](https://raw.githubusercontent.com/Julien-Marcou/unicode-emoji-picker-demo/main/unicode-emoji-picker-light.png)\n\n\n## Installation\n\n```shell\nnpm install unicode-emoji-picker\n```\n\n\n## Usage\n\nThis NPM package uses the ECMAScript Modules system, so the easiest way to use it, is with a Bundler (like WebPack), so you don't have to worry about how to make it available and import it.\n\n### With a Bundler\n\nAs it is a self-defined custom element, you must import it only once in your main entry file so it's available everywhere :\n\n```javascript\nimport 'unicode-emoji-picker';\n```\n\nIn addition to the previous import, if you are using TypeScript, and want the typing of the `EmojiPickerElement`, you can import it where you need it :\n\n```typescript\nimport { EmojiPickerElement } from 'unicode-emoji-picker';\n```\n\n### Without a Bundler\n\nBecause `unicode-emoji-picker` have named dependencies to `scrollable-component` (custom scrollbars) and `unicode-emoji` (raw data for Emojis), you will have to use [Import Maps](https://wicg.github.io/import-maps/), so the dependencies can be properly loaded.\n\nYou will also need to expose the following files, so they are accessible from the web :\n\n- `scrollable-component/index.js`\n- `unicode-emoji/index.js`\n- `unicode-emoji-picker/index.js`\n\nUnfortunately, Import Maps are not implemented in any browser yet, so you'll have to use a polyfill :\n\n```html\n\u003cscript async src=\"https://unpkg.com/es-module-shims@0.12.1/dist/es-module-shims.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"importmap-shim\"\u003e\n  {\n    \"imports\": {\n      \"scrollable-component\": \"/node_modules/scrollable-component/index.js\",\n      \"unicode-emoji\": \"/node_modules/unicode-emoji/index.js\",\n      \"unicode-emoji-picker\": \"/node_modules/unicode-emoji-picker/index.js\"\n    }\n  }\n\u003c/script\u003e\n```\n\nThen you will be able to import it in your HTML using a `module-shim` script :\n\n```html\n\u003cscript type=\"module-shim\" src=\"/node_modules/unicode-emoji-picker/index.js\"\u003e\u003c/script\u003e\n\n\u003c!-- or --\u003e\n\n\u003cscript type=\"module-shim\"\u003e\n  import 'unicode-emoji-picker';\n\u003c/script\u003e\n```\n\n\n## Documentation\n\nThe `EmojiPickerElement` is displayed by default, if you want to place it relative to another HTML element or display/hide it, it's all up to you :\n\n```html\n\u003cunicode-emoji-picker\u003e\u003c/unicode-emoji-picker\u003e\n```\n\nTo retrieve the emoji picked by the user, you can add an event listener :\n\n```javascript\nconst emojiPicker = document.querySelector('unicode-emoji-picker');\nemojiPicker.addEventListener('emoji-pick', (event) =\u003e {\n  console.log(event.detail.emoji);\n});\n```\n\nYou can display the filters bar on every side of the Unicode Emoji Picker by setting the `filters-position` attribute to one of these values : `top`, `bottom`, `left` or `right` (default to `top`) :\n\n```html\n\u003cunicode-emoji-picker filters-position=\"bottom\"\u003e\u003c/unicode-emoji-picker\u003e\n```\n\nYou can choose the version of the `Unicode Emoji` specification to use by setting the `version` attribute to one of these values : `0.6`, `0.7`, `1.0`, `2.0`, `3.0`, `4.0`, `5.0`, `11.0`, `12.0`, `12.1`, `13.0`, `13.1`, `14.0`, `15.0`, `15.1` or `16.0` (default to `12.0` as newer versions are currently not widely supported) :\n\n```html\n\u003cunicode-emoji-picker version=\"16.0\"\u003e\u003c/unicode-emoji-picker\u003e\n```\n\nYou can choose which group will be selected by default by setting the `default-group` attribute to one of these values : `search`, `face-emotion`, `food-drink`, `animals-nature`, `activities-events`, `person-people`, `travel-places`, `objects`, `symbols` or `flags` (default to `face-emotion`)\n\n```html\n\u003cunicode-emoji-picker default-group=\"search\"\u003e\u003c/unicode-emoji-picker\u003e\n```\n\nYou can use the Unicode Emoji Picker's API after the custom `\u003cunicode-emoji-picker\u003e` element has been defined to programmatically change the selected group or trigger a search :\n\n```javascript\nconst emojiPicker = document.querySelector('unicode-emoji-picker');\n\nwindow.customElements.whenDefined('unicode-emoji-picker').then(() =\u003e {\n  emojiPicker.selectGroup('search');\n  emojiPicker.searchEmoji('love face');\n});\n```\n\n\n## Customization\n\nYou can customize the look of the Unicode Emoji Picker using CSS properties :\n\n```css\nunicode-emoji-picker {\n  /* Because the component is built using the \"em\" unit, everything is scaled up from the font-size */\n  /* So you should probably only change this value if you want to resize the component */\n  /* It also directly reflects the font-size for the emoji font */\n  font-size: 24px;\n\n  /* Dimensions of the viewport */\n  --min-emoji-column: 6;\n  --max-emoji-column: 11;\n  --min-emoji-row: 4;\n  --max-emoji-row: 10;\n\n  /* Global */\n  --outer-padding: 0.8em;\n  --fill-color: #fff;\n  --text-color: #111;\n  --border-radius: 10px;\n  --box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 2px rgba(0, 0, 0, 0.15);\n  --transition: 150ms cubic-bezier(0, 0, .2, .1);\n  --emoji-font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;\n\n  /* Filters bar */\n  --filters-border-width: 1px;\n  --filters-border-color: #e4e4e4;\n  --filter-fill-color: transparent;\n  --filter-fill-color-hover: #e9e9e9;\n  --filter-border-radius: 8px;\n  --filter-active-marker-border-width: 4px;\n  --filter-active-marker-border-color: #aaa;\n  --filter-padding: 0.5em;\n  --filter-gap: 0.2em;\n  --filter-size: 2em;\n\n  /* Content's viewport */\n  --content-scrollbar-width: 14px;\n  --content-scrollbar-thumb-fill-color: #d7d7d7;\n  --content-scrollbar-thumb-fill-color-hover: #aaa;\n\n  /* Title/search bar */\n  --title-bar-fill-color: rgba(255, 255, 255, 0.95);\n  --title-bar-height: 3em;\n  --title-bar-horizontal-padding: 1.1em;\n  --title-bar-font-size: 1.3em;\n  --search-input-font-size: 0.85em;\n  --search-input-line-height: 1.6em;\n  --search-input-padding: 0.35em 0.4em 0.55em;\n  --search-input-border-width: 0 0 4px 0;\n  --search-input-border-color: #e4e4e4;\n  --search-input-border-color-hover: #222;\n\n  /* Emojis */\n  --emoji-fill-color: transparent;\n  --emoji-fill-color-hover: transparent;\n  --emoji-border-width: 4px;\n  --emoji-border-color: transparent;\n  --emoji-border-color-hover: #d7d7d7;\n  --emoji-border-radius: 8px;\n  --emoji-gap: 0.2em;\n  --emoji-size: 1.85em;\n  --emoji-font-size: 1em;\n\n  /* Variations panel */\n  --variations-backdrop-fill-color: rgba(255, 255, 255, 0.7);\n  --variations-fill-color: var(--fill-color);\n  --variations-border-radius: var(--border-radius);\n  --variations-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2), 0 1px 3px 0 rgba(0, 0, 0, .2);\n  --emoji-variation-marker-size: 8px;\n  --emoji-variation-marker-border-width: 4px;\n  --emoji-variation-marker-border-color: #d7d7d7;\n  --emoji-variation-marker-border-color-hover: #aaa;\n}\n```\n\nHere is an example for a dark theme :\n\n```css\nunicode-emoji-picker {\n  --fill-color: #393938;\n  --text-color: #fffffc;\n  --box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.35);\n  --filters-border-color: #30302a;\n  --filter-fill-color-hover: #454540;\n  --content-scrollbar-thumb-fill-color: #50504a;\n  --content-scrollbar-thumb-fill-color-hover: #76766f;\n  --filter-active-marker-border-color: #595955;\n  --title-bar-fill-color: rgba(57, 57, 55, 0.96);\n  --search-input-border-color: #50504a;\n  --search-input-border-color-hover: #eee;\n  --emoji-border-color-hover: #595955;\n  --variations-backdrop-fill-color: rgba(57, 57, 55, 0.8);\n  --emoji-variation-marker-border-color: #50504a;\n  --emoji-variation-marker-border-color-hover: #76766f;\n}\n```\n\n![Unicode Emoji Picker - Dark theme](https://raw.githubusercontent.com/Julien-Marcou/unicode-emoji-picker-demo/main/unicode-emoji-picker-dark.png)\n\n\n## Translation\n\nYou can translate the labels (or change them to whatever you want) using the `setTranslation()` method after the custom `\u003cunicode-emoji-picker\u003e` element has been defined :\n\n```javascript\nconst emojiPicker = document.querySelector('unicode-emoji-picker');\n\nwindow.customElements.whenDefined('unicode-emoji-picker').then(() =\u003e {\n  emojiPicker.setTranslation({\n    'search': {\n      emoji: '🔎',\n      title: 'Search an Emoji',\n      inputPlaceholder: 'Search an Emoji...',\n    },\n    'face-emotion': {\n      emoji: '😀️',\n      title: 'Smileys \u0026 Emotion',\n    },\n    'food-drink': {\n      emoji: '🥕️',\n      title: 'Food \u0026 Drink',\n    },\n    'animals-nature': {\n      emoji: '🦜️',\n      title: 'Nature \u0026 Animals',\n    },\n    'activities-events': {\n      emoji: '♟️',\n      title: 'Activities \u0026 Events',\n    },\n    'person-people': {\n      emoji: '🧍',\n      title: 'People',\n    },\n    'travel-places': {\n      emoji: '✈️',\n      title: 'Travel \u0026 Places',\n    },\n    'objects': {\n      emoji: '👒',\n      title: 'Clothing \u0026 Objects',\n    },\n    'symbols': {\n      emoji: '💬️',\n      title: 'Symbols',\n    },\n    'flags': {\n      emoji: '🚩',\n      title: 'Flags',\n    },\n  });\n});\n```\n\nUnfortunately, you can't translate emojis' description \u0026 keywords yet.\n\n\n## Browser compatibility\n\nFirefox, Chromium-based browsers (Chrome, Edge, Opera, ...) \u0026 WebKit-based browsers (Safari, ...)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjulien-marcou%2Funicode-emoji-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjulien-marcou%2Funicode-emoji-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjulien-marcou%2Funicode-emoji-picker/lists"}