emoji-picker-react 4.5.0-rc.1 → 4.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -26
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
An emoji picker component for React applications.
|
|
6
|
-
|
|
7
5
|
## What to know before using
|
|
8
6
|
|
|
9
7
|
- This package assumes it runs in the browser. I have taken many steps to prevent it from failing on the server, but still, it is recommended to only render the component on the client. See troubleshooting section for more information.
|
|
@@ -30,12 +28,10 @@ function App() {
|
|
|
30
28
|
|
|
31
29
|
## Shout Outs!
|
|
32
30
|
|
|
33
|
-
|
|
34
|
-
|
|
|
35
|
-
|
|
36
|
-
|
|
|
37
|
-
| <a href="https://pavelbolo.com" target="_blank">Pavel Bolo</a> |
|
|
38
|
-
|
|
31
|
+
| Component Design 🎨 |
|
|
32
|
+
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
33
|
+
| <a href="https://pavelbolo.com" target="_blank"></a> |
|
|
34
|
+
| <a href="https://pavelbolo.com" target="_blank">Pavel Bolo</a> |
|
|
39
35
|
|
|
40
36
|
## Features
|
|
41
37
|
|
|
@@ -52,24 +48,26 @@ function App() {
|
|
|
52
48
|
|
|
53
49
|
The following props are accepted by them picker:
|
|
54
50
|
|
|
55
|
-
| Prop | Type
|
|
56
|
-
| ---------------------- |
|
|
57
|
-
| onEmojiClick | function
|
|
58
|
-
| autoFocusSearch | boolean
|
|
59
|
-
| Theme | string
|
|
60
|
-
| emojiStyle | string
|
|
61
|
-
| defaultSkinTone | string
|
|
62
|
-
| lazyLoadEmojis | boolean
|
|
63
|
-
| previewConfig | object
|
|
64
|
-
| searchPlaceholder | string
|
|
65
|
-
| suggestedEmojisMode | string
|
|
66
|
-
| skinTonesDisabled | boolean
|
|
67
|
-
| searchDisabled | boolean
|
|
68
|
-
| skinTonePickerLocation | string
|
|
69
|
-
| `width` | `number`/`string`
|
|
70
|
-
| emojiVersion | `string`
|
|
71
|
-
| `height` | `number`/`string`
|
|
72
|
-
| getEmojiUrl | `Function`
|
|
51
|
+
| Prop | Type | Default | Description |
|
|
52
|
+
| ---------------------- | ------------------------------------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
53
|
+
| onEmojiClick | function | | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter. |
|
|
54
|
+
| autoFocusSearch | boolean | `true` | Controls the auto focus of the search input. |
|
|
55
|
+
| Theme | string | `light` | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`. |
|
|
56
|
+
| emojiStyle | string | `apple` | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`. |
|
|
57
|
+
| defaultSkinTone | string | `neutral` | Controls the default skin tone. |
|
|
58
|
+
| lazyLoadEmojis | boolean | `false` | Controls whether the emojis are loaded lazily or not. |
|
|
59
|
+
| previewConfig | object | `{}` | Controls the preview of the emoji. See below for more information. |
|
|
60
|
+
| searchPlaceholder | string | `Search` | Controls the placeholder of the search input. |
|
|
61
|
+
| suggestedEmojisMode | string | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`. |
|
|
62
|
+
| skinTonesDisabled | boolean | `false` | Controls whether the skin tones are disabled or not. |
|
|
63
|
+
| searchDisabled | boolean | `false` | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component. |
|
|
64
|
+
| skinTonePickerLocation | string | `SEARCH` | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`. |
|
|
65
|
+
| `width` | `number`/`string` | `350` | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string. |
|
|
66
|
+
| emojiVersion | `string` | - | Allows displaying emojis up to a certain version for compatibility. |
|
|
67
|
+
| `height` | `number`/`string` | `450` | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string. |
|
|
68
|
+
| getEmojiUrl | `Function` | - | Allows to customize the emoji url and provide your own image host. |
|
|
69
|
+
| categories | `Array` | - | Allows full config over ordering, naming and display of categories. |
|
|
70
|
+
| customEmojis | `Array<{names: string[], imgUrl: string, id: string}>` | - | Allows adding custom emojis to the picker. |
|
|
73
71
|
|
|
74
72
|
## Full details
|
|
75
73
|
|
|
@@ -145,6 +143,7 @@ import { SkinTones } from 'emoji-picker-react';
|
|
|
145
143
|
To only sort/omit categories, you can simply pass an array of category names to display:
|
|
146
144
|
|
|
147
145
|
- 'suggested',
|
|
146
|
+
- 'custom', - Hidden by default
|
|
148
147
|
- 'smileys_people',
|
|
149
148
|
- 'animals_nature',
|
|
150
149
|
- 'food_drink',
|
|
@@ -186,6 +185,45 @@ import { SkinTones } from 'emoji-picker-react';
|
|
|
186
185
|
|
|
187
186
|
* `getEmojiUrl`: `(unified: string, emojiStyle: EmojiStyle) => string` - Allows to customize the emoji url and provide your own image host. The function receives the emoji unified and the emoji style as parameters. The function should return the url of the emoji image.
|
|
188
187
|
|
|
188
|
+
## Custom Emojis
|
|
189
|
+
|
|
190
|
+
The customEmojis prop allows you to add custom emojis to the picker. The custom emojis prop takes an array of custom emojis, each custom emoji has three keys:
|
|
191
|
+
|
|
192
|
+
id: Unique identifier for each of the custom emojis
|
|
193
|
+
names: an array of string identifiers, will be used both for display, search and indexing.
|
|
194
|
+
imgUrl: URL for the emoji image
|
|
195
|
+
|
|
196
|
+
### Usage Example:
|
|
197
|
+
|
|
198
|
+
```jsx
|
|
199
|
+
<Picker
|
|
200
|
+
customEmojis={[
|
|
201
|
+
{
|
|
202
|
+
names: ['Film'],
|
|
203
|
+
imgUrl: 'https://cdn.jsdelivr.net/npm/eva-icons/fill/svg/film.svg',
|
|
204
|
+
id: 'film'
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
names: ['Bar Chart'],
|
|
208
|
+
imgUrl: 'https://cdn.jsdelivr.net/npm/eva-icons/fill/svg/bar-chart.svg',
|
|
209
|
+
id: 'bar_chart'
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
names: ['champagne', 'bottle', 'sparkling wine'],
|
|
213
|
+
imgUrl:
|
|
214
|
+
'https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/src/food-drink/drink/1F37E.svg',
|
|
215
|
+
id: 'champagne'
|
|
216
|
+
}
|
|
217
|
+
]}
|
|
218
|
+
/>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
Here are some additional things to keep in mind about custom emojis:
|
|
222
|
+
|
|
223
|
+
- The custom emojis will be added to the Custom category.
|
|
224
|
+
- The location or name of the Custom category can be controlled via the categories prop.
|
|
225
|
+
- The custom emojis will be indexed by their id property. This means that you can search for custom emojis by their id or names.
|
|
226
|
+
|
|
189
227
|
# Customization
|
|
190
228
|
|
|
191
229
|
## Custom Picker Width and Height
|
package/package.json
CHANGED