treehouse
/
emoji-mart-lazyload
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Document custom emoji support

release
Jakob Krigovsky 2017-05-24 17:36:48 +02:00
parent 021f7b8db6
commit 00dce20f0f
1 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
README.md
View File

@ -29,6 +29,7 @@ import { Picker } from 'emoji-mart'
| **emoji** | | `department_store` | The emoji shown when no emojis are hovered | | **emoji** | | `department_store` | The emoji shown when no emojis are hovered |
| **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. | | **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). | | **exclude** | | `[]` | Don't load excluded categories. Accepts [I18n categories keys](#i18n). |
| **custom** | | `[]` | [Custom emojis](#custom-emojis) |
| **emojiSize** | | `24` | The emoji width and height | | **emojiSize** | | `24` | The emoji width and height |
| **onClick** | | | Params: `(emoji, event) => {}` | | **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`) | | **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`) |
@ -57,6 +58,7 @@ categories: {
objects: 'Objects', objects: 'Objects',
symbols: 'Symbols', symbols: 'Symbols',
flags: 'Flags', flags: 'Flags',
custom: 'Custom',
} }
``` ```
@ -104,6 +106,16 @@ Sheets are served from [unpkg](https://unpkg.com), a global CDN that serves file
skin: 3, skin: 3,
native: '🎅🏼' native: '🎅🏼'
} }
{
id: 'octocat',
name: 'Octocat',
colons: ':octocat',
emoticons: [],
custom: true,
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
}
``` ```
### Emoji ### Emoji
@ -128,6 +140,25 @@ import { Emoji } from 'emoji-mart'
| **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@2.4.4/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. | | **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@2.4.4/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` | | **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'],
emoticons: [],
keywords: ['github'],
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
},
]
<Picker custom={customEmojis} />
```
## Headless search ## Headless search
The `Picker` doesn’t have to be mounted for you to take advantage of the advanced search results. The `Picker` doesn’t have to be mounted for you to take advantage of the advanced search results.