Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/figma/emoji-mart
Fork of https://github.com/missive/emoji-mart
https://github.com/figma/emoji-mart
Last synced: 22 days ago
JSON representation
Fork of https://github.com/missive/emoji-mart
- Host: GitHub
- URL: https://github.com/figma/emoji-mart
- Owner: figma
- License: bsd-3-clause
- Created: 2017-08-25T00:37:14.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-28T21:31:27.000Z (8 months ago)
- Last Synced: 2024-10-08T10:18:40.135Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 51.7 MB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Emoji Mart is a Slack-like customizable
emoji picker component for React
Demo • Changelog
Brought to you by the Missive team
## Figma
To be more specific, this is Figma's private forked copy of the emoji-mart repo. It is used by the figma/figma repo for emoji picking.
To update this code, make changes to the tip of the `figma-release-1` branch. Then run `npm run clean && npm run build`, commit the results, and push the branch to origin. This puts the javascript build artifact itself in our git repo at the tip of that branch. Then go to the web/ directory in figma/figma and update the pinned hash to whatever the resulting commit hash is and commit that; the yarn install process will then update the emojimart package to the build artifacts at that git hash.
You can do this with arbitrary hashes, but if you're not doing it at the tip of `figma-release-1`, you probably want to backport those changes. It is useful to have a history of all the changes we've made to the repo in one place, so continuing to use that branch is useful.
## Components
### Picker
```jsx
import { Picker } from 'emoji-mart'
```
| 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](#i18n). 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](#i18n). |
| **custom** | | `[]` | [Custom emojis](#custom-emojis) |
| **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** | | [`{…}`](#i18n) | [An object](#i18n) 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](#sheet-sizes): `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 |
| **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
```js
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](https://unpkg.com), a global CDN that serves files published to [npm](https://www.npmjs.com).
| Set | sheetSize | Size |
| -------- | --------- | -------- |
| apple | 16 | 938.7 kB |
| apple | 20 | 1.3 MB |
| apple | 32 | 2.6 MB |
| apple | 64 | 7.2 MB |
| emojione | 16 | 805.5 kB |
| emojione | 20 | 1.1 MB |
| emojione | 32 | 2.0 MB |
| emojione | 64 | 2.7 MB |
| google | 16 | 622.6 kB |
| google | 20 | 849.8 kB |
| google | 32 | 1.6 MB |
| google | 64 | 3.6 MB |
| twitter | 16 | 776.0 kB |
| twitter | 20 | 1.0 MB |
| twitter | 32 | 1.9 MB |
| twitter | 64 | 4.2 MB |
#### Examples of `emoji` object:
```js
{
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
```jsx
import { Emoji } from 'emoji-mart'
```
| 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](#sheet-sizes): `16, 20, 32, 64` |
| **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/[email protected]/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` |
## Custom emojis
You can provide custom emojis which will show up in their own category.
```js
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'
},
]
```
## Headless search
The `Picker` doesn’t have to be mounted for you to take advantage of the advanced search results.
```js
import { emojiIndex } from 'emoji-mart'
emojiIndex.search('christmas').map((o) => o.native)
// => [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️]
```
## 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.
#### Emoticons
The only emoji picker that returns emojis when searching for emoticons.
#### Results intersection
For better results, **Emoji Mart** split search into words and only returns results matching both terms.
### Fully customizable
#### Anchors color, title and default emoji
#### Emojis sizes and length
#### Default skin color
As the developer, you have control over which skin color is used by default.
It can however be overwritten as per user preference.
#### Multiple sets supported
Apple / Google / Twitter / EmojiOne / Messenger / Facebook
## 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
```sh
$ yarn run build:data
$ yarn start
$ open example/index.html
```
## 🎩 Hat tips!
Powered by [iamcal/emoji-data](https://github.com/iamcal/emoji-data) and inspired by [iamcal/js-emoji](https://github.com/iamcal/js-emoji).
🙌🏼 [Cal Henderson](https://github.com/iamcal).
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.