Update README
Etienne Lemay
parent
3dd27d3a13
commit
9c7e461e21
138
README.md
138
README.md
|
|
@ -1,26 +1,136 @@
|
||||||
<h1 align="center">🏬 Emoji Mart</h1>
|
<div align="center">
|
||||||
|
<br><b>Emoji Mart</b> is a Slack-like customizable<br>emoji picker component for React
|
||||||
|
<br><img src="https://cloud.githubusercontent.com/assets/436043/17186519/9e71e8fe-5403-11e6-9314-21365c56a601.png">
|
||||||
|
<br><a href="https://missiveapp.com"><img src="https://cloud.githubusercontent.com/assets/436043/17186909/17f9cede-5405-11e6-988a-a7c2380af396.png"></a>
|
||||||
|
<br>Brought to you by the <a href="https://missiveapp.com">Missive</a> team
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Components
|
||||||
|
### Picker
|
||||||
```jsx
|
```jsx
|
||||||
import {Picker} from 'emoji-mart'
|
import { Picker } from 'emoji-mart'
|
||||||
|
|
||||||
<Picker
|
<Picker sheetURL='…' onClick={this.addEmoji} />
|
||||||
emojiSize={24}
|
<Picker sheetURL='…' title='Pick your emoji…' emoji='point_up' />
|
||||||
perLine={9}
|
<Picker sheetURL='…' style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
|
||||||
sheetURL='images/sheet-apple-64.png'
|
```
|
||||||
onClick={(emoji) => console.log(emoji)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
/*
|
| Prop | Required | Default | Description |
|
||||||
|
| ---- | :------: | ------- | ----------- |
|
||||||
|
| **sheetURL** | ✓ | | The absolute or relative path of the emoji sheet |
|
||||||
|
| **color** | | `#ae65c5` | The top bar anchors select and hover color |
|
||||||
|
| **emoji** | | `department_store` | The emoji shown when no emojis are hovered |
|
||||||
|
| **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`) |
|
||||||
|
| **skin** | | `1` | Default skin color (1-6) |
|
||||||
|
| **style** | | | Inline styles applied to the root element. Useful for positioning |
|
||||||
|
| **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |
|
||||||
|
|
||||||
|
Examples of `emoji` object:
|
||||||
|
```js
|
||||||
{
|
{
|
||||||
|
id: 'smiley',
|
||||||
|
name: 'Smiling Face with Open Mouth',
|
||||||
colons: ':smiley:',
|
colons: ':smiley:',
|
||||||
emoticons: [
|
emoticons: [
|
||||||
'=)',
|
'=)',
|
||||||
'=-)'
|
'=-)'
|
||||||
],
|
],
|
||||||
id: 'smiley',
|
skin: null,
|
||||||
name: 'Smiling Face with Open Mouth',
|
native: '😃'
|
||||||
native: '😃',
|
}
|
||||||
skin: 1
|
|
||||||
|
{
|
||||||
|
id: 'santa',
|
||||||
|
name: 'Father Christmas',
|
||||||
|
colons: ':santa::skin-tone-3:',
|
||||||
|
emoticons: [],
|
||||||
|
skin: 3,
|
||||||
|
native: '🎅🏼'
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
You can use [npmcdn](https://npmcdn.com/emoji-mart@0.2.0/sheets/) with the sheets included in this repo:
|
||||||
|
https://npmcdn.com/emoji-mart@0.2.0/sheets/sheet_apple_64.png
|
||||||
|
https://npmcdn.com/emoji-mart@0.2.0/sheets/sheet_emojione_64.png
|
||||||
|
|
||||||
|
### Emoji
|
||||||
|
```jsx
|
||||||
|
import { Emoji } from 'emoji-mart'
|
||||||
|
|
||||||
|
<Emoji sheetURL='…' emoji={{ id: 'santa', skin: 3 }} />
|
||||||
|
<Emoji sheetURL='…' emoji='santa' />
|
||||||
|
```
|
||||||
|
|
||||||
|
| Prop | Required | Default | Description |
|
||||||
|
| ---- | :------: | ------- | ----------- |
|
||||||
|
| **emoji** | ✓ | | Either a string or an `emoji` object |
|
||||||
|
| **sheetURL** | ✓ | | The absolute or relative path of the emoji sheet |
|
||||||
|
| **size** | ✓ | | The emoji width and height. |
|
||||||
|
| **onClick** | | | Params: `(emoji, event) => {}` |
|
||||||
|
| **onLeave** | | | Params: `(emoji, event) => {}` |
|
||||||
|
| **onOver** | | | Params: `(emoji, event) => {}` |
|
||||||
|
| **skin** | | `1` | Skin color (1-6) |
|
||||||
|
|
||||||
|
## 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
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
## 🎩 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).
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
<div align="center">
|
||||||
|
<a href="https://missiveapp.com"><img src="https://cloud.githubusercontent.com/assets/436043/17222476/7fb2ef62-54c6-11e6-81a9-6b9d7323d19c.png"></a>
|
||||||
|
<br><a href="https://missiveapp.com">Missive</a> 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.
|
||||||
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue