![]() Bug Fix: Ensure category ids are not dropped after emojisToShowFilter call |
||
---|---|---|
.storybook | ||
css | ||
docs | ||
scripts | ||
spec | ||
src | ||
stories | ||
.babelrc | ||
.gitignore | ||
.npmignore | ||
LICENSE | ||
README.md | ||
karma.conf.js | ||
package.json | ||
yarn.lock |
README.md
Emoji Mart is a Slack-like customizable
emoji picker component for React
Demo • Changelog
![picker](https://user-images.githubusercontent.com/436043/32532554-08be471c-c400-11e7-906a-c745dc3ec630.png)
![Missive | Team email, team chat, team tasks, one app](https://user-images.githubusercontent.com/436043/32532559-0d15ddfc-c400-11e7-8a24-64d0157d0cb0.png)
Brought to you by the Missive team
Installation
npm install --save emoji-mart
Components
Picker
import { Picker } from 'emoji-mart'
<Picker set='emojione' />
<Picker onClick={this.addEmoji} />
<Picker title='Pick your emoji…' emoji='point_up' />
<Picker style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
<Picker i18n={{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }} />
Prop | Required | Default | Description |
---|---|---|---|
autoFocus | false |
Auto focus the search input when mounted | |
color | #ae65c5 |
The top bar anchors select and hover color | |
emoji | department_store |
The emoji shown when no emojis are hovered, set to an empty string to show nothing | |
include | [] |
Only load included categories. Accepts I18n categories keys. Order will be respected, except for the recent category which will always be the first. |
|
exclude | [] |
Don't load excluded categories. Accepts I18n categories keys. | |
custom | [] |
Custom emojis | |
recent | Pass your own frequently used emojis as array of string IDs | ||
emojiSize | 24 |
The emoji width and height | |
onClick | Params: (emoji, event) => {} |
||
perLine | 9 |
Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set Frequently Used length as well (perLine * 4 ) |
|
i18n | {…} |
An object containing localized strings | |
native | false |
Renders the native unicode emoji | |
set | apple |
The emoji set: 'apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook' |
|
sheetSize | 64 |
The emoji sheet size: 16, 20, 32, 64 |
|
backgroundImageFn | ((set, sheetSize) => …) |
A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. | |
emojisToShowFilter | ((emoji) => true) |
A Fn to choose whether an emoji should be displayed or not | |
showPreview | true |
Display preview section | |
emojiTooltip | false |
Show emojis short name when hovering (title) | |
skin | 1 |
Default skin color: 1, 2, 3, 4, 5, 6 |
|
style | Inline styles applied to the root element. Useful for positioning | ||
title | Emoji Mart™ |
The title shown when no emojis are hovered |
I18n
search: 'Search',
notfound: 'No Emoji Found',
categories: {
search: 'Search Results',
recent: 'Frequently Used',
people: 'Smileys & People',
nature: 'Animals & Nature',
foods: 'Food & Drink',
activity: 'Activity',
places: 'Travel & Places',
objects: 'Objects',
symbols: 'Symbols',
flags: 'Flags',
custom: 'Custom',
}
Sheet sizes
Sheets are served from unpkg, a global CDN that serves files published to npm.
Set | sheetSize | Size |
---|---|---|
apple | 16 | 334 KB |
apple | 20 | 459 KB |
apple | 32 | 1.08 MB |
apple | 64 | 2.94 MB |
emojione | 16 | 315 KB |
emojione | 20 | 435 KB |
emojione | 32 | 1020 KB |
emojione | 64 | 2.33 MB |
16 | 322 KB | |
20 | 439 KB | |
32 | 1020 KB | |
64 | 2.5 MB | |
16 | 301 KB | |
20 | 409 KB | |
32 | 907 KB | |
64 | 2.17 MB | |
messenger | 16 | 325 KB |
messenger | 20 | 449 MB |
messenger | 32 | 1.05 MB |
messenger | 64 | 2.69 MB |
16 | 288 KB | |
20 | 389 KB | |
32 | 839 KB | |
64 | 1.82 MB |
Examples of emoji
object:
{
id: 'smiley',
name: 'Smiling Face with Open Mouth',
colons: ':smiley:',
text: ':)',
emoticons: [
'=)',
'=-)'
],
skin: null,
native: '😃'
}
{
id: 'santa',
name: 'Father Christmas',
colons: ':santa::skin-tone-3:',
text: '',
emoticons: [],
skin: 3,
native: '🎅🏼'
}
{
id: 'octocat',
name: 'Octocat',
colons: ':octocat',
text: '',
emoticons: [],
custom: true,
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
}
Emoji
import { Emoji } from 'emoji-mart'
<Emoji emoji={{ id: 'santa', skin: 3 }} size={16} />
<Emoji emoji=':santa::skin-tone-3:' size={16} />
<Emoji emoji='santa' set='emojione' size={16} />
Prop | Required | Default | Description |
---|---|---|---|
emoji | ✓ | Either a string or an emoji object |
|
size | ✓ | The emoji width and height. | |
native | false |
Renders the native unicode emoji | |
onClick | Params: (emoji, event) => {} |
||
onLeave | Params: (emoji, event) => {} |
||
onOver | Params: (emoji, event) => {} |
||
set | apple |
The emoji set: 'apple', 'google', 'twitter', 'emojione' |
|
sheetSize | 64 |
The emoji sheet size: 16, 20, 32, 64 |
|
backgroundImageFn | ((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/sheet_${set}_${sheetSize}.png`) |
A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. | |
skin | 1 |
Skin color: 1, 2, 3, 4, 5, 6 |
|
tooltip | false |
Show emoji short name when hovering (title) |
Custom emojis
You can provide custom emojis which will show up in their own category.
import { Picker } from 'emoji-mart'
const customEmojis = [
{
name: 'Octocat',
short_names: ['octocat'],
text: '',
emoticons: [],
keywords: ['github'],
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
},
]
<Picker custom={customEmojis} />
Headless search
The Picker
doesn’t have to be mounted for you to take advantage of the advanced search results.
import { emojiIndex } from 'emoji-mart'
emojiIndex.search('christmas').map((o) => o.native)
// => [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️]
Storage
By default EmojiMart will store user chosen skin and frequently used emojis in localStorage
. That can however be overwritten should you want to store these in your own storage.
import { store } from 'emoji-mart'
store.setHandlers({
getter: (key) => {
// Get from your own storage (sync)
},
setter: (key, value) => {
// Persist in your own storage (can be async)
}
})
Possible keys are:
Key | Value | Description |
---|---|---|
skin | 1, 2, 3, 4, 5, 6 |
|
frequently | { 'astonished': 11, '+1': 22 } |
An object where the key is the emoji name and the value is the usage count |
last | 'astonished' | (Optional) Used by frequently to be sure the latest clicked emoji will always appear in the “Recent” category |
Features
Powerful search
Short name, name and keywords
Not only does Emoji Mart return more results than most emoji picker, they’re more accurate and sorted by relevance.
![summer](https://user-images.githubusercontent.com/436043/32532567-179f1be4-c400-11e7-885e-df6e9b52c665.png)
Emoticons
The only emoji picker that returns emojis when searching for emoticons.
![emoticons](https://user-images.githubusercontent.com/436043/32532570-1be0dd28-c400-11e7-90cd-f33396277602.png)
Results intersection
For better results, Emoji Mart split search into words and only returns results matching both terms.
![high-five](https://user-images.githubusercontent.com/436043/32532573-1f4a9d1e-c400-11e7-8656-921bc6c09732.png)
Fully customizable
Anchors color, title and default emoji
Emojis sizes and length
![size-and-length](https://user-images.githubusercontent.com/436043/32532590-381f67de-c400-11e7-86f6-328e30d6b116.png)
Default skin color
As the developer, you have control over which skin color is used by default.
![skins](https://user-images.githubusercontent.com/436043/32532858-0a559560-c402-11e7-8680-f77f780a5a49.png)
It can however be overwritten as per user preference.
![customizable-skin](https://user-images.githubusercontent.com/436043/32532883-2c620e7c-c402-11e7-976c-50d32be0566c.png)
Multiple sets supported
Apple / Google / Twitter / EmojiOne / Messenger / Facebook
![sets](https://user-images.githubusercontent.com/436043/33786868-d4226e60-dc38-11e7-840a-e4cf490f5f4a.png)
Not opinionated
Emoji Mart doesn’t automatically insert anything into a text input, nor does it show or hide itself. It simply returns an emoji
object. It’s up to the developer to mount/unmount (it’s fast!) and position the picker. You can use the returned object as props for the EmojiMart.Emoji
component. You could also use emoji.colons
to insert text into a textarea or emoji.native
to use the emoji.
Development
$ yarn build
$ yarn start
$ yarn storybook
🎩 Hat tips!
Powered by iamcal/emoji-data and inspired by iamcal/js-emoji.
🙌🏼 Cal Henderson.
![Missive | Team email, team chat, team tasks, one app](https://user-images.githubusercontent.com/436043/32532559-0d15ddfc-c400-11e7-8a24-64d0157d0cb0.png)
Missive mixes team email and threaded group chat for productive teams.
A single app for all your internal and external communication and a full work management solution.