emoji-picker-element
Advanced tools
emoji-picker-element - npm Package Compare versions
Comparing version 1.14.1 to 1.15.0
@@ -36,2 +36,8 @@ { | ||
| "default": "\"🖐\"" | ||
| }, | ||
| { | ||
| "name": "emoji-version", | ||
| "description": "Maximum supported emoji version as a number (e.g. `14.0` or `13.1`). Setting this disables the default emoji support detection.", | ||
| "type": "string", | ||
| "default": null | ||
| } | ||
@@ -72,2 +78,7 @@ ], | ||
| "kind": "field" | ||
| }, | ||
| { | ||
| "name": "emojiVersion", | ||
| "description": "Maximum supported emoji version as a number (e.g. `14.0` or `13.1`). Setting this disables the default emoji support detection.", | ||
| "kind": "field" | ||
| } | ||
@@ -132,2 +143,7 @@ ], | ||
| { | ||
| "name": "--emoji-font-family", | ||
| "description": "Font family for a custom emoji font (as opposed to native emoji) (default: `\"Twemoji Mozilla\",\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\",\"EmojiOne Color\",\"Android Emoji\",sans-serif`)", | ||
| "default": "\"\\\"Twemoji Mozilla\\\",\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\",\\\"Segoe UI Symbol\\\",\\\"Noto Color Emoji\\\",\\\"EmojiOne Color\\\",\\\"Android Emoji\\\",sans-serif\"" | ||
| }, | ||
| { | ||
| "name": "--emoji-padding", | ||
@@ -134,0 +150,0 @@ "description": "Vertical and horizontal padding on emoji (default: `0.5rem`)", |
| { | ||
| "name": "emoji-picker-element", | ||
| "version": "1.14.1", | ||
| "version": "1.15.0", | ||
| "description": "Lightweight emoji picker distributed as a web component", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -11,10 +11,11 @@ import { I18n, PickerConstructorOptions, EmojiPickerEventMap, CustomEmoji } from "./shared"; | ||
| * | ||
| * @param dataSource - URL to fetch the emoji data from (`data-source` when used as an attribute) | ||
| * @param locale - Locale string | ||
| * @param i18n - i18n object (see below for details) | ||
| * @param skinToneEmoji - The emoji to use for the skin tone picker (`skin-tone-emoji` when used as an attribute) | ||
| * @param customEmoji - Array of custom emoji | ||
| * @param customCategorySorting - Function to sort custom category strings (sorted alphabetically by default) | ||
| * @param dataSource - URL to fetch the emoji data from (`data-source` when used as an attribute). | ||
| * @param locale - Locale string. | ||
| * @param i18n - i18n object (see below for details). | ||
| * @param skinToneEmoji - The emoji to use for the skin tone picker (`skin-tone-emoji` when used as an attribute). | ||
| * @param customEmoji - Array of custom emoji. | ||
| * @param customCategorySorting - Function to sort custom category strings (sorted alphabetically by default). | ||
| * @param emojiVersion - Maximum supported emoji version as a number (e.g. `14.0` or `13.1`). Setting this disables the default emoji support detection. | ||
| */ | ||
| constructor({ dataSource, locale, i18n, skinToneEmoji, customEmoji, customCategorySorting }?: PickerConstructorOptions); | ||
| constructor({ dataSource, locale, i18n, skinToneEmoji, customEmoji, customCategorySorting, emojiVersion }?: PickerConstructorOptions); | ||
@@ -21,0 +22,0 @@ addEventListener<K extends keyof EmojiPickerEventMap>(type: K, listener: (this: Picker, ev: EmojiPickerEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; |
144
README.md
@@ -16,4 +16,4 @@ emoji-picker-element | ||
| - Uses IndexedDB, so it consumes [far less memory](https://nolanlawson.com/2020/06/28/introducing-emoji-picker-element-a-memory-efficient-emoji-picker-for-the-web/) than other emoji pickers | ||
| - [Small bundle size](https://bundlephobia.com/result?p=emoji-picker-element) (41kB minified, ~14.4kB gzipped) | ||
| - Renders native emoji only, no spritesheets | ||
| - [Small bundle size](https://bundlephobia.com/result?p=emoji-picker-element) (<15kB min+gz) | ||
| - Renders native emoji by default, with support for custom fonts | ||
| - [Accessible by default](https://nolanlawson.com/2020/07/01/building-an-accessible-emoji-picker/) | ||
@@ -29,2 +29,5 @@ - Framework and bundler not required, just add a `<script>` tag and use it | ||
| + [Examples](#examples) | ||
| + [Emoji support](#emoji-support) | ||
| - [Custom emoji font](#custom-emoji-font) | ||
| - [Polyfilling flag emoji on Windows](#polyfilling-flag-emoji-on-windows) | ||
| * [Styling](#styling) | ||
@@ -133,8 +136,59 @@ + [Size](#size) | ||
| - [Demo](https://nolanlawson.github.io/emoji-picker-element) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/index.html)) | ||
| - [Button with tooltip/popover](https://bl.ocks.org/nolanlawson/raw/781e7084e4c17acb921357489d51a5b0/) ([source](https://bl.ocks.org/nolanlawson/781e7084e4c17acb921357489d51a5b0)) | ||
| - [Inserting emoji into a text input](https://bl.ocks.org/nolanlawson/raw/4f13bc639cdb3483efca8b657f30a1e0/) ([source](https://bl.ocks.org/nolanlawson/4f13bc639cdb3483efca8b657f30a1e0)) | ||
| - [In a React app](https://bl.ocks.org/nolanlawson/raw/fa60717eceb719b729e10d522c62c9ec/) ([source](https://bl.ocks.org/nolanlawson/fa60717eceb719b729e10d522c62c9ec)) | ||
| - [With Twemoji](https://bl.ocks.org/nolanlawson/raw/fead700a0325aabd92670d56d6d422d8) ([source](https://bl.ocks.org/nolanlawson/fead700a0325aabd92670d56d6d422d8)) (**Note:** has a performance cost. Use with care.) | ||
| - [Fallback for missing flag emoji on Windows](https://bl.ocks.org/nolanlawson/raw/1c67a41fb24978bab93a44ed1d62fab2/) ([source](https://gist.github.com/nolanlawson/1c67a41fb24978bab93a44ed1d62fab2)) | ||
| - [Button with tooltip/popover](https://nolanlawson.github.io/emoji-picker-element/demos/tooltip/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/demos/tooltip/index.html)) | ||
| - [Inserting emoji into a text input](https://nolanlawson.github.io/emoji-picker-element/demos/input/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/demos/input/index.html)) | ||
| - [In a React app](https://nolanlawson.github.io/emoji-picker-element/demos/react/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/demos/react/index.html)) | ||
| - [Custom emoji font](https://nolanlawson.github.io/emoji-picker-element/demos/twemoji-mozilla/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/demos/twemoji-mozilla/index.html)) | ||
| - [Fallback for missing flag emoji on Windows](https://nolanlawson.github.io/emoji-picker-element/demos/flags/index.html) ([source](https://github.com/nolanlawson/emoji-picker-element/blob/master/docs/demos/flags/index.html)) | ||
| ### Emoji support | ||
| [Emoji support varies](https://nolanlawson.com/2022/04/08/the-struggle-of-using-native-emoji-on-the-web/) across browsers and operating systems. By default, `emoji-picker-element` will hide unsupported emoji from the picker. | ||
| To work around this, you can use [a custom emoji font](#custom-emoji-font) or [polyfill flag emoji on Windows](#polyfilling-flag-emoji-on-windows). | ||
| #### Custom emoji font | ||
| To use a custom emoji font, first set the `--emoji-font-family` CSS property: | ||
| ```css | ||
| emoji-picker { | ||
| --emoji-font-family: MyCustomFont; | ||
| } | ||
| ``` | ||
| Then, specify the maximum emoji version supported by the font (see [Emojipedia](https://emojipedia.org/emoji-versions/) for a list of versions). | ||
| In HTML: | ||
| ```html | ||
| <emoji-picker emoji-version="14.0"></emoji-picker> | ||
| ``` | ||
| Or JavaScript: | ||
| ```js | ||
| const picker = new Picker({ | ||
| emojiVersion: 14.0 | ||
| }); | ||
| ``` | ||
| If the `emoji-version`/`emojiVersion` option is set, then `emoji-picker-element` will not attempt to detect unsupported emoji or hide them. | ||
| Also note that support for color fonts [varies across browsers and OSes](https://caniuse.com/colr), and some browsers may have <a href="https://github.com/nolanlawson/emoji-picker-element/pull/308#issuecomment-1367491149">bugs</a> or not render the font at all. Be careful to test your supported browsers when using this approach. | ||
| #### Polyfilling flag emoji on Windows | ||
| As of this writing, [Windows does not support country flag emoji](https://answers.microsoft.com/en-us/windows/forum/all/where-are-the-flag-emoji-in-windows-10/93daa6e8-880a-48b1-9891-ab5bfbfbce98). This is only a problem in Chromium-based browsers, because Firefox ships with its own emoji font. | ||
| To work around this, you can use [country-flag-emoji-polyfill](https://www.npmjs.com/package/country-flag-emoji-polyfill): | ||
| ```js | ||
| import { polyfillCountryFlagEmojis } from 'country-flag-emoji-polyfill'; | ||
| // emoji-picker-element will use "Twemoji Mozilla" and fall back to other fonts for non-flag emoji | ||
| polyfillCountryFlagEmojis('Twemoji Mozilla'); | ||
| ``` | ||
| Note that you do not need to do this if you are using [a custom emoji font](#custom-emoji-font). | ||
| ## Styling | ||
@@ -191,29 +245,30 @@ | ||
| | Variable | Default | Default (dark) | Description | | ||
| | ---------------------------- | ---------------------- | -------------- | ---------------------------------------------------------------------------------------------------- | | ||
| | `--background` | `#fff` | `#222` | Background of the entire `<emoji-picker>` | | ||
| | `--border-color` | `#e0e0e0` | `#444` | | | ||
| | `--border-size` | `1px` | | Width of border used in most of the picker | | ||
| | `--button-active-background` | `#e6e6e6` | `#555555` | Background of an active button | | ||
| | `--button-hover-background` | `#d9d9d9` | `#484848` | Background of a hovered button | | ||
| | `--category-emoji-padding` | `var(--emoji-padding)` | | Vertical/horizontal padding on category emoji, if you want it to be different from `--emoji-padding` | | ||
| | `--category-emoji-size` | `var(--emoji-size)` | | Width/height of category emoji, if you want it to be different from `--emoji-size` | | ||
| | `--category-font-color` | `#111` | `#efefef` | Font color of custom emoji category headings | | ||
| | `--category-font-size` | `1rem` | | Font size of custom emoji category headings | | ||
| | `--emoji-padding` | `0.5rem` | | Vertical and horizontal padding on emoji | | ||
| | `--emoji-size` | `1.375rem` | | Width and height of all emoji | | ||
| | `--indicator-color` | `#385ac1` | `#5373ec` | Color of the nav indicator | | ||
| | `--indicator-height` | `3px` | | Height of the nav indicator | | ||
| | `--input-border-color` | `#999` | `#ccc` | | | ||
| | `--input-border-radius` | `0.5rem` | | | | ||
| | `--input-border-size` | `1px` | | | | ||
| | `--input-font-color` | `#111` | `#efefef` | | | ||
| | `--input-font-size` | `1rem` | | | | ||
| | `--input-line-height` | `1.5` | | | | ||
| | `--input-padding` | `0.25rem` | | | | ||
| | `--input-placeholder-color` | `#999` | `#ccc` | | | ||
| | `--num-columns` | `8` | | How many columns to display in the emoji grid | | ||
| | `--outline-color` | `#999` | `#fff` | Focus outline color | | ||
| | `--outline-size` | `2px` | | Focus outline width | | ||
| | `--skintone-border-radius` | `1rem` | | Border radius of the skintone dropdown | | ||
| | Variable | Default | Default (dark) | Description | | ||
| | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------- | | ||
| | `--background` | `#fff` | `#222` | Background of the entire `<emoji-picker>` | | ||
| | `--border-color` | `#e0e0e0` | `#444` | | | ||
| | `--border-size` | `1px` | | Width of border used in most of the picker | | ||
| | `--button-active-background` | `#e6e6e6` | `#555555` | Background of an active button | | ||
| | `--button-hover-background` | `#d9d9d9` | `#484848` | Background of a hovered button | | ||
| | `--category-emoji-padding` | `var(--emoji-padding)` | | Vertical/horizontal padding on category emoji, if you want it to be different from `--emoji-padding` | | ||
| | `--category-emoji-size` | `var(--emoji-size)` | | Width/height of category emoji, if you want it to be different from `--emoji-size` | | ||
| | `--category-font-color` | `#111` | `#efefef` | Font color of custom emoji category headings | | ||
| | `--category-font-size` | `1rem` | | Font size of custom emoji category headings | | ||
| | `--emoji-font-family` | `"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif` | | Font family for a custom emoji font (as opposed to native emoji) | | ||
| | `--emoji-padding` | `0.5rem` | | Vertical and horizontal padding on emoji | | ||
| | `--emoji-size` | `1.375rem` | | Width and height of all emoji | | ||
| | `--indicator-color` | `#385ac1` | `#5373ec` | Color of the nav indicator | | ||
| | `--indicator-height` | `3px` | | Height of the nav indicator | | ||
| | `--input-border-color` | `#999` | `#ccc` | | | ||
| | `--input-border-radius` | `0.5rem` | | | | ||
| | `--input-border-size` | `1px` | | | | ||
| | `--input-font-color` | `#111` | `#efefef` | | | ||
| | `--input-font-size` | `1rem` | | | | ||
| | `--input-line-height` | `1.5` | | | | ||
| | `--input-padding` | `0.25rem` | | | | ||
| | `--input-placeholder-color` | `#999` | `#ccc` | | | ||
| | `--num-columns` | `8` | | How many columns to display in the emoji grid | | ||
| | `--outline-color` | `#999` | `#fff` | Focus outline color | | ||
| | `--outline-size` | `2px` | | Focus outline width | | ||
| | `--skintone-border-radius` | `1rem` | | Border radius of the skintone dropdown | | ||
@@ -274,10 +329,11 @@ <!-- CSS variable options end --> | ||
| Name | Type | Default | Description | | ||
| ------ | ------ | ------ | ------ | | ||
| `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 (`data-source` when used as an attribute) | | ||
| `i18n` | I18n | - | i18n object (see below for details) | | ||
| `locale` | string | "en" | Locale string | | ||
| `skinToneEmoji` | string | "🖐️" | The emoji to use for the skin tone picker (`skin-tone-emoji` when used as an attribute) | | ||
| | Name | Type | Default | Description | | ||
| |-------------------------|---------------|------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------| | ||
| | `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 (`data-source` when used as an attribute) | | ||
| | `emojiVersion` | number | - | Maximum supported emoji version as a number (e.g. `14.0` or `13.1`). Setting this disables the default emoji support detection. | | ||
| | `i18n` | I18n | - | i18n object (see below for details) | | ||
| | `locale` | string | "en" | Locale string | | ||
| | `skinToneEmoji` | string | "🖐️" | The emoji to use for the skin tone picker (`skin-tone-emoji` when used as an attribute) | | ||
@@ -896,6 +952,8 @@ | ||
| To avoid downloading a large sprite sheet that renders a particular emoji set – which may look out-of-place on different platforms, or may have [IP issues](https://blog.emojipedia.org/apples-emoji-crackdown/) – `emoji-picker-element` only renders native emoji. This means it is limited to the emoji actually installed on the user's device. | ||
| To avoid downloading a large sprite sheet or font file – which may look out-of-place on different platforms, or may have [IP issues](https://blog.emojipedia.org/apples-emoji-crackdown/) – `emoji-picker-element` only renders native emoji by default. This means it is limited to the emoji font actually installed on the user's device. | ||
| To avoid rendering ugly unsupported or half-supported emoji, `emoji-picker-element` will automatically detect emoji support and only render the supported characters. (So no empty boxes or awkward double emoji.) If no color emoji are supported by the browser/OS, then an error message is displayed (e.g. older browsers, some odd Linux configurations). | ||
| That said, `emoji-picker-element` does support [custom emoji fonts](#custom-emoji-font) if you really want. | ||
| ### JSON loading | ||
@@ -902,0 +960,0 @@ |
@@ -38,2 +38,3 @@ export declare enum SkinTone { | ||
| customCategorySorting?: (a: string, b: string) => number; | ||
| emojiVersion?: number; | ||
| } | ||
@@ -40,0 +41,0 @@ export interface I18n { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by1.3%
6298
- Number of lines in readme file
- increased by6.33%
974
Worsened metrics
- Total package byte prevSize
- decreased by-6.86%
562030
No dependency changes