Gathering detailed insights and metrics for emoji-mart
Installations
npm install emoji-martDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.13.0
NPM Version
8.1.0
Score
99.7
Supply Chain
100
Quality
79
Maintenance
100
Vulnerability
100
License
Releases
39
Contributors
36
Languages
4
TypeScript
HTML
SCSS
JavaScript
TypeScript (49.27%)
HTML (22.93%)
SCSS (15.39%)
JavaScript (12.41%)
Developer
Download Statistics
Total Downloads
81,387,727
Last Day
93,204
Last Week
468,939
Last Month
1,612,337
Last Year
22,300,952
GitHub Statistics
8,804 Stars
320 Commits
835 Forks
39 Watching
5 Branches
36 Contributors
Bundle Size
76.63 kB
Minified
26.77 kB
Minified + Gzipped
Maintainers
2
Package Meta Information
Latest Version
5.6.0
Package Id
emoji-mart@5.6.0
Unpacked Size
1.56 MB
Size
420.02 kB
File Count
11
NPM Version
8.1.0
Node Version
16.13.0
Publised On
25 Apr 2024
Total Downloads
Cumulative downloads
Total Downloads
81,387,727
Last day
-0.8%
93,204
Compared to previous day
Last week
15.2%
468,939
Compared to previous week
Last month
-15.8%
1,612,337
Compared to previous month
Last year
-5.4%
22,300,952
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
1
Versions
Emoji Mart is a customizable
emoji picker HTML component for the web
Demo
Brought to you by the Missive team
📖 Table of Contents
- 💾 Data
- 🏪 Picker
- 🙃 Emoji component
- 🕵️♀️ Headless search
- 🔬 Get emoji data from native
- 🗺 Internationalization
- 📚 Examples
- 🤓 Built for modern browsers
- 🛠 Development
💾 Data
Data required for the picker to work has been completely decoupled from the library. That gives developers the flexibility to better control their app bundle size and let them choose how and when this data is loaded. Data can be:
Bundled directly into your codebase
- Pros: Picker renders instantly, data is available offline
- Cons: Slower initial page load (bigger file to load)
1yarn add @emoji-mart/data
1import data from '@emoji-mart/data' 2import { Picker } from 'emoji-mart' 3 4new Picker({ data })
Fetched remotely
- Pros: Data fetched only when needed, does not affect your app bundle size
- Cons: Network latency, doesn’t work offline (unless you configure a ServiceWorker)
1import { Picker } from 'emoji-mart' 2new Picker({ 3 data: async () => { 4 const response = await fetch( 5 'https://cdn.jsdelivr.net/npm/@emoji-mart/data', 6 ) 7 8 return response.json() 9 } 10})
In this example data is fetched from a content delivery network, but it could also be fetched from your own domain if you want to host the data.
🏪 Picker
React
1npm install --save emoji-mart @emoji-mart/data @emoji-mart/react
1import data from '@emoji-mart/data' 2import Picker from '@emoji-mart/react' 3 4function App() { 5 return ( 6 <Picker data={data} onEmojiSelect={console.log} /> 7 ) 8}
Browser
1<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script> 2<script> 3 const pickerOptions = { onEmojiSelect: console.log } 4 const picker = new EmojiMart.Picker(pickerOptions) 5 6 document.body.appendChild(picker) 7</script>
Options / Props
| Option | Default | Choices | Description |
|---|---|---|---|
| data | {} | Data to use for the picker | |
| i18n | {} | Localization data to use for the picker | |
| categories | [] | frequent, people, nature, foods, activity, places, objects, symbols, flags | Categories to show in the picker. Order is respected. |
| custom | [] | Custom emojis | |
| onEmojiSelect | null | Callback when an emoji is selected | |
| onClickOutside | null | Callback when a click outside of the picker happens | |
| onAddCustomEmoji | null | Callback when the Add custom emoji button is clicked. The button will only be displayed if this callback is provided. It is displayed when search returns no results. | |
| autoFocus | false | Whether the picker should automatically focus on the search input | |
| categoryIcons | {} | Custom category icons | |
| dynamicWidth | false | Whether the picker should calculate perLine dynamically based on the width of <em-emoji-picker>. When enabled, perLine is ignored | |
| emojiButtonColors | [] | i.e. #f00, pink, rgba(155,223,88,.7) | An array of color that affects the hover background color |
| emojiButtonRadius | 100% | i.e. 6px, 1em, 100% | The radius of the emoji buttons |
| emojiButtonSize | 36 | The size of the emoji buttons | |
| emojiSize | 24 | The size of the emojis (inside the buttons) | |
| emojiVersion | 14 | 1, 2, 3, 4, 5, 11, 12, 12.1, 13, 13.1, 14 | The version of the emoji data to use. Latest version supported in @emoji-mart/data is currently 14 |
| exceptEmojis | [] | List of emoji IDs that will be excluded from the picker | |
| icons | auto | auto, outline, solid | The type of icons to use for the picker. outline with light theme and solid with dark theme. |
| locale | en | en, ar, be, cs, de, es, fa, fi, fr, hi, it, ja, ko, nl, pl, pt, ru, sa, tr, uk, vi, zh | The locale to use for the picker |
| maxFrequentRows | 4 | The maximum number of frequent rows to show. 0 will disable frequent category | |
| navPosition | top | top, bottom, none | The position of the navigation bar |
| noCountryFlags | false | Whether to show country flags or not. If not provided, tbhis is handled automatically (Windows doesn’t support country flags) | |
| noResultsEmoji | cry | The id of the emoji to use for the no results emoji | |
| perLine | 9 | The number of emojis to show per line | |
| previewEmoji | point_up | The id of the emoji to use for the preview when not hovering any emoji. point_up when preview position is bottom and point_down when preview position is top. | |
| previewPosition | bottom | top, bottom, none | The position of the preview |
| searchPosition | sticky | sticky, static, none | The position of the search input |
| set | native | native, apple, facebook, google, twitter | The set of emojis to use for the picker. native being the most performant, others rely on spritesheets. |
| skin | 1 | 1, 2, 3, 4, 5, 6 | The emojis skin tone |
| skinTonePosition | preview | preview, search, none | The position of the skin tone selector |
| theme | auto | auto, light, dark | The color theme of the picker |
| getSpritesheetURL | null | A function that returns the URL of the spritesheet to use for the picker. It should be compatible with the data provided. |
Custom emojis
You can use custom emojis by providing an array of categories and their emojis. Emojis also support multiple skin tones and can be GIFs or SVGs.
1import data from '@emoji-mart/data' 2import Picker from '@emoji-mart/react' 3 4const custom = [ 5 { 6 id: 'github', 7 name: 'GitHub', 8 emojis: [ 9 { 10 id: 'octocat', 11 name: 'Octocat', 12 keywords: ['github'], 13 skins: [{ src: './octocat.png' }], 14 }, 15 { 16 id: 'shipit', 17 name: 'Squirrel', 18 keywords: ['github'], 19 skins: [ 20 { src: './shipit-1.png' }, { src: './shipit-2.png' }, { src: './shipit-3.png' }, 21 { src: './shipit-4.png' }, { src: './shipit-5.png' }, { src: './shipit-6.png' }, 22 ], 23 }, 24 ], 25 }, 26 { 27 id: 'gifs', 28 name: 'GIFs', 29 emojis: [ 30 { 31 id: 'party_parrot', 32 name: 'Party Parrot', 33 keywords: ['dance', 'dancing'], 34 skins: [{ src: './party_parrot.gif' }], 35 }, 36 ], 37 }, 38] 39 40function App() { 41 return ( 42 <Picker data={data} custom={custom} /> 43 ) 44}
Custom category icons
You can use custom category icons by providing an object with the category name as key and the icon as value. Currently supported formats are svg string and src. See example.
1const customCategoryIcons = { 2 categoryIcons: { 3 activity: { 4 svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M57.89 397.2c-6.262-8.616-16.02-13.19-25.92-13.19c-23.33 0-31.98 20.68-31.98 32.03c0 6.522 1.987 13.1 6.115 18.78l46.52 64C58.89 507.4 68.64 512 78.55 512c23.29 0 31.97-20.66 31.97-32.03c0-6.522-1.988-13.1-6.115-18.78L57.89 397.2zM496.1 352c-44.13 0-79.72 35.75-79.72 80s35.59 80 79.72 80s79.91-35.75 79.91-80S540.2 352 496.1 352zM640 99.38c0-13.61-4.133-27.34-12.72-39.2l-23.63-32.5c-13.44-18.5-33.77-27.68-54.12-27.68c-13.89 0-27.79 4.281-39.51 12.8L307.8 159.7C262.2 192.8 220.4 230.9 183.4 273.4c-24.22 27.88-59.18 63.99-103.5 99.63l56.34 77.52c53.79-35.39 99.15-55.3 127.1-67.27c51.88-22 101.3-49.87 146.9-82.1l202.3-146.7C630.5 140.4 640 120 640 99.38z"/></svg>', 5 }, 6 people: { 7 src: './people.png', 8 }, 9 }, 10}
🙃 Emoji component
The emoji web component usage is the same no matter what library you use.
First, you need to make sure data has been initialized. You need to call this only once per page load. Note that if you call init like this, you don’t necessarily need to include data in your Picker props. It doesn’t hurt either, it will noop.
1import data from '@emoji-mart/data' 2import { init } from 'emoji-mart' 3 4init({ data })
Then you can use the emoji component in your HTML / JSX.
1<em-emoji id="+1" size="2em"></em-emoji> 2<em-emoji id="+1" skin="2"></em-emoji> 3<em-emoji shortcodes=":+1::skin-tone-1:"></em-emoji> 4<em-emoji shortcodes=":+1::skin-tone-2:"></em-emoji>
Attributes / Props
| Attribute | Example | Description |
|---|---|---|
| id | +1 | An emoji ID |
| shortcodes | :+1::skin-tone-2: | An emoji shortcode |
| native | 👍 | A native emoji |
| size | 2em | The inline element size |
| fallback | :shrug: | A string to be rendered in case the emoji can’t be found |
| set | native | The emoji set: native, apple, facebook, google, twitter |
| skin | 1 | The emoji skin tone: 1, 2, 3, 4, 5, 6 |
🕵️♀️ Headless search
You can search without the Picker. Just like the emoji component, data needs to be initialized first in order to use the search index.
1import data from '@emoji-mart/data' 2import { init, SearchIndex } from 'emoji-mart' 3 4init({ data }) 5 6async function search(value) { 7 const emojis = await SearchIndex.search(value) 8 const results = emojis.map((emoji) => { 9 return emoji.skins[0].native 10 }) 11 12 console.log(results) 13} 14 15search('christmas') // => ['🎄', '🇨🇽', '🧑🎄', '🔔', '🤶', '🎁', '☃️', '❄️', '🎅', '⛄']
🔬 Get emoji data from native
You can get emoji data from a native emoji. This is useful if you want to get the emoji ID from a native emoji. Just like the emoji component, data needs to be initialized first in order to retrieve the emoji data.
1import data from '@emoji-mart/data' 2import { init, getEmojiDataFromNative } from 'emoji-mart' 3 4init({ data }) 5 6getEmojiDataFromNative('🤞🏿').then(console.log) 7/* { 8 aliases: ['hand_with_index_and_middle_fingers_crossed'], 9 id: 'crossed_fingers', 10 keywords: ['hand', 'with', 'index', 'and', 'middle', 'good', 'lucky'], 11 name: 'Crossed Fingers', 12 native: '🤞🏿', 13 shortcodes: ':crossed_fingers::skin-tone-6:', 14 skin: 6, 15 unified: '1f91e-1f3ff', 16} */
🗺 Internationalization
EmojiMart UI supports multiple languages, feel free to open a PR if yours is missing.
1import i18n from '@emoji-mart/data/i18n/fr.json' 2i18n.search_no_results_1 = 'Aucun emoji' 3 4new Picker({ i18n })
Given the small file size, English is built-in and doesn’t need to be provided.
📚 Examples
🤓 Built for modern browsers
EmojiMart relies on these APIs, you may need to include polyfills if you need to support older browsers:
🛠 Development
1yarn install 2yarn dev
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 4/13 approved changesets -- score normalized to 3
Reason
9 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/missive/emoji-mart/test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/missive/emoji-mart/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/missive/emoji-mart/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/missive/emoji-mart/test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/missive/emoji-mart/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/missive/emoji-mart/test.yml/main?enable=pin
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 23 are checked with a SAST tool
Score
3.2
/10
Last Scanned on 2025-01-06
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More