emoji-picker-react 4.5.0-rc.1 → 4.5.1
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 +121 -29
- package/dist/components/emoji/ExportedEmoji.d.ts +2 -1
- package/dist/emoji-picker-react.cjs.development.js +44 -15
- package/dist/emoji-picker-react.cjs.development.js.map +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
- package/dist/emoji-picker-react.esm.js +44 -15
- package/dist/emoji-picker-react.esm.js.map +1 -1
- package/dist/types/exposedTypes.d.ts +3 -1
- package/package.json +1 -1
- package/src/components/emoji/ExportedEmoji.tsx +5 -3
- package/src/components/emoji/ViewOnlyEmoji.tsx +1 -1
- package/src/hooks/useMouseDownHandlers.ts +42 -14
- package/src/types/exposedTypes.ts +3 -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,16 +28,15 @@ 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
|
|
|
42
38
|
- Custom click handler
|
|
39
|
+
- Custom Emojis Support
|
|
43
40
|
- Dark mode
|
|
44
41
|
- Customizable styles via css variables
|
|
45
42
|
- Default skin tone selection
|
|
@@ -52,24 +49,26 @@ function App() {
|
|
|
52
49
|
|
|
53
50
|
The following props are accepted by them picker:
|
|
54
51
|
|
|
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`
|
|
52
|
+
| Prop | Type | Default | Description |
|
|
53
|
+
| ---------------------- | ------------------------------------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
54
|
+
| onEmojiClick | function | | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter. |
|
|
55
|
+
| autoFocusSearch | boolean | `true` | Controls the auto focus of the search input. |
|
|
56
|
+
| Theme | string | `light` | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`. |
|
|
57
|
+
| emojiStyle | string | `apple` | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`. |
|
|
58
|
+
| defaultSkinTone | string | `neutral` | Controls the default skin tone. |
|
|
59
|
+
| lazyLoadEmojis | boolean | `false` | Controls whether the emojis are loaded lazily or not. |
|
|
60
|
+
| previewConfig | object | `{}` | Controls the preview of the emoji. See below for more information. |
|
|
61
|
+
| searchPlaceholder | string | `Search` | Controls the placeholder of the search input. |
|
|
62
|
+
| suggestedEmojisMode | string | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`. |
|
|
63
|
+
| skinTonesDisabled | boolean | `false` | Controls whether the skin tones are disabled or not. |
|
|
64
|
+
| searchDisabled | boolean | `false` | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component. |
|
|
65
|
+
| skinTonePickerLocation | string | `SEARCH` | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`. |
|
|
66
|
+
| `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. |
|
|
67
|
+
| emojiVersion | `string` | - | Allows displaying emojis up to a certain version for compatibility. |
|
|
68
|
+
| `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. |
|
|
69
|
+
| getEmojiUrl | `Function` | - | Allows to customize the emoji url and provide your own image host. |
|
|
70
|
+
| categories | `Array` | - | Allows full config over ordering, naming and display of categories. |
|
|
71
|
+
| customEmojis | `Array<{names: string[], imgUrl: string, id: string}>` | - | Allows adding custom emojis to the picker. |
|
|
73
72
|
|
|
74
73
|
## Full details
|
|
75
74
|
|
|
@@ -80,9 +79,11 @@ The following props are accepted by them picker:
|
|
|
80
79
|
activeSkinTone: SkinTones;
|
|
81
80
|
unified: string;
|
|
82
81
|
unifiedWithoutSkinTone: string;
|
|
83
|
-
emoji: string;
|
|
82
|
+
emoji: string; // the emoji character, for example: '😀'. Emoji ID in custom emojis
|
|
83
|
+
isCustom: boolean; // whether the emoji is a custom emoji or not
|
|
84
84
|
names: string[];
|
|
85
|
-
|
|
85
|
+
imageUrl: string; // the url of the emoji image with the current emoji style applied
|
|
86
|
+
getImageUrl: (emojiStyle: EmojiStyle) => string; // a function that receives an emoji style and returns the url of the emoji image with the provided style applied
|
|
86
87
|
}
|
|
87
88
|
```
|
|
88
89
|
|
|
@@ -145,6 +146,7 @@ import { SkinTones } from 'emoji-picker-react';
|
|
|
145
146
|
To only sort/omit categories, you can simply pass an array of category names to display:
|
|
146
147
|
|
|
147
148
|
- 'suggested',
|
|
149
|
+
- 'custom', - Hidden by default
|
|
148
150
|
- 'smileys_people',
|
|
149
151
|
- 'animals_nature',
|
|
150
152
|
- 'food_drink',
|
|
@@ -186,6 +188,95 @@ import { SkinTones } from 'emoji-picker-react';
|
|
|
186
188
|
|
|
187
189
|
* `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
190
|
|
|
191
|
+
## Custom Emojis
|
|
192
|
+
|
|
193
|
+
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:
|
|
194
|
+
|
|
195
|
+
id: Unique identifier for each of the custom emojis
|
|
196
|
+
names: an array of string identifiers, will be used both for display, search and indexing.
|
|
197
|
+
imgUrl: URL for the emoji image
|
|
198
|
+
|
|
199
|
+
### Usage Example:
|
|
200
|
+
|
|
201
|
+
```jsx
|
|
202
|
+
<Picker
|
|
203
|
+
customEmojis={[
|
|
204
|
+
{
|
|
205
|
+
names: ['Alice', 'alice in wonderland'],
|
|
206
|
+
imgUrl:
|
|
207
|
+
'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/alice.png',
|
|
208
|
+
id: 'alice'
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
names: ['Dog'],
|
|
212
|
+
imgUrl:
|
|
213
|
+
'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/dog.png',
|
|
214
|
+
id: 'dog'
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
names: ['Hat'],
|
|
218
|
+
imgUrl:
|
|
219
|
+
'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/hat.png',
|
|
220
|
+
id: 'hat'
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
names: ['Kid'],
|
|
224
|
+
imgUrl:
|
|
225
|
+
'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/kid.png',
|
|
226
|
+
id: 'kid'
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
names: ['Mic'],
|
|
230
|
+
imgUrl:
|
|
231
|
+
'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/mic.png',
|
|
232
|
+
id: 'mic'
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
names: ['Moab', 'desert'],
|
|
236
|
+
imgUrl:
|
|
237
|
+
'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/moab.png',
|
|
238
|
+
id: 'moab'
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
names: ['Potter', 'harry', 'harry potter'],
|
|
242
|
+
imgUrl:
|
|
243
|
+
'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/potter.png',
|
|
244
|
+
id: 'potter'
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
names: ['Shroom', 'mushroom'],
|
|
248
|
+
imgUrl:
|
|
249
|
+
'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/shroom.png',
|
|
250
|
+
id: 'shroom'
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
names: ['Smily'],
|
|
254
|
+
imgUrl:
|
|
255
|
+
'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/smily.png',
|
|
256
|
+
id: 'smily'
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
names: ['Tabby', 'cat'],
|
|
260
|
+
imgUrl:
|
|
261
|
+
'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/tabby.png',
|
|
262
|
+
id: 'tabby'
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
names: ['Vest'],
|
|
266
|
+
imgUrl:
|
|
267
|
+
'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/vest.png',
|
|
268
|
+
id: 'vest'
|
|
269
|
+
}
|
|
270
|
+
]}
|
|
271
|
+
/>
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
Here are some additional things to keep in mind about custom emojis:
|
|
275
|
+
|
|
276
|
+
- The custom emojis will be added to the Custom category.
|
|
277
|
+
- The location or name of the Custom category can be controlled via the categories prop.
|
|
278
|
+
- The custom emojis will be indexed by their id property. This means that you can search for custom emojis by their id or names.
|
|
279
|
+
|
|
189
280
|
# Customization
|
|
190
281
|
|
|
191
282
|
## Custom Picker Width and Height
|
|
@@ -227,7 +318,8 @@ The picker exports an `Emoji` component. The emoji component is the same used wi
|
|
|
227
318
|
| `size` | number | 32 | The size of the emoji. |
|
|
228
319
|
| `emojiStyle` | `EmojiStyle` | `EmojiStyle.APPLE` | The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. |
|
|
229
320
|
| `lazyLoad` | boolean | `false` | Whether to lazy load the emoji. image |
|
|
230
|
-
| `
|
|
321
|
+
| `emojiUrl` | string | - | The url of the emoji image to render. Useful for custom emojis. |
|
|
322
|
+
| `getEmojiUrl` | Function | - | Allows to customize the emoji url and provide your own image host for dynamic resolution. |
|
|
231
323
|
|
|
232
324
|
```js
|
|
233
325
|
import { Emoji, EmojiStyle } from 'emoji-picker-react';
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { EmojiStyle } from '../../types/exposedTypes';
|
|
3
3
|
import { GetEmojiUrl } from './BaseEmojiProps';
|
|
4
|
-
export declare function ExportedEmoji({ unified, size, emojiStyle, lazyLoad, getEmojiUrl }: {
|
|
4
|
+
export declare function ExportedEmoji({ unified, size, emojiStyle, lazyLoad, getEmojiUrl, emojiUrl }: {
|
|
5
5
|
unified: string;
|
|
6
6
|
emojiStyle?: EmojiStyle;
|
|
7
7
|
size?: number;
|
|
8
8
|
lazyLoad?: boolean;
|
|
9
9
|
getEmojiUrl?: GetEmojiUrl;
|
|
10
|
+
emojiUrl?: string;
|
|
10
11
|
}): JSX.Element | null;
|
|
@@ -17703,6 +17703,13 @@ function setSuggested(emoji, skinTone) {
|
|
|
17703
17703
|
}
|
|
17704
17704
|
}
|
|
17705
17705
|
|
|
17706
|
+
function isCustomCategory(category) {
|
|
17707
|
+
return category.category === exports.Categories.CUSTOM;
|
|
17708
|
+
}
|
|
17709
|
+
function isCustomEmoji(emoji) {
|
|
17710
|
+
return emoji.imgUrl !== undefined;
|
|
17711
|
+
}
|
|
17712
|
+
|
|
17706
17713
|
function useCloseAllOpenToggles() {
|
|
17707
17714
|
var _useEmojiVariationPic = useEmojiVariationPickerState(),
|
|
17708
17715
|
variationPicker = _useEmojiVariationPic[0],
|
|
@@ -17771,6 +17778,7 @@ function useMouseDownHandlers(BodyRef) {
|
|
|
17771
17778
|
updateSuggested = _useUpdateSuggested[1];
|
|
17772
17779
|
|
|
17773
17780
|
var getEmojiUrl = useGetEmojiUrlConfig();
|
|
17781
|
+
var activeEmojiStyle = useEmojiStyleConfig();
|
|
17774
17782
|
var onClick = React.useCallback(function onClick(event) {
|
|
17775
17783
|
if (disallowClickRef.current) {
|
|
17776
17784
|
return;
|
|
@@ -17789,8 +17797,8 @@ function useMouseDownHandlers(BodyRef) {
|
|
|
17789
17797
|
var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
|
|
17790
17798
|
updateSuggested();
|
|
17791
17799
|
setSuggested(emoji, skinToneToUse);
|
|
17792
|
-
onEmojiClick(emojiClickOutput(emoji, skinToneToUse, getEmojiUrl), event);
|
|
17793
|
-
}, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested, getEmojiUrl]);
|
|
17800
|
+
onEmojiClick(emojiClickOutput(emoji, skinToneToUse, activeEmojiStyle, getEmojiUrl), event);
|
|
17801
|
+
}, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested, getEmojiUrl, activeEmojiStyle]);
|
|
17794
17802
|
var onMouseDown = React.useCallback(function onMouseDown(event) {
|
|
17795
17803
|
var _window;
|
|
17796
17804
|
|
|
@@ -17861,15 +17869,40 @@ function emojiFromEvent(event) {
|
|
|
17861
17869
|
return emojiFromElement(target);
|
|
17862
17870
|
}
|
|
17863
17871
|
|
|
17864
|
-
function emojiClickOutput(emoji, activeSkinTone, getEmojiUrl) {
|
|
17872
|
+
function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl) {
|
|
17873
|
+
var names = emojiNames(emoji);
|
|
17874
|
+
|
|
17875
|
+
if (isCustomEmoji(emoji)) {
|
|
17876
|
+
var _unified = emojiUnified(emoji);
|
|
17877
|
+
|
|
17878
|
+
return {
|
|
17879
|
+
activeSkinTone: activeSkinTone,
|
|
17880
|
+
emoji: _unified,
|
|
17881
|
+
getImageUrl: function getImageUrl() {
|
|
17882
|
+
return emoji.imgUrl;
|
|
17883
|
+
},
|
|
17884
|
+
imageUrl: emoji.imgUrl,
|
|
17885
|
+
isCustom: true,
|
|
17886
|
+
names: names,
|
|
17887
|
+
unified: _unified,
|
|
17888
|
+
unifiedWithoutSkinTone: _unified
|
|
17889
|
+
};
|
|
17890
|
+
}
|
|
17891
|
+
|
|
17865
17892
|
var unified = emojiUnified(emoji, activeSkinTone);
|
|
17866
17893
|
return {
|
|
17867
17894
|
activeSkinTone: activeSkinTone,
|
|
17868
17895
|
emoji: parseNativeEmoji(unified),
|
|
17869
17896
|
getImageUrl: function getImageUrl(emojiStyle) {
|
|
17897
|
+
if (emojiStyle === void 0) {
|
|
17898
|
+
emojiStyle = activeEmojiStyle != null ? activeEmojiStyle : exports.EmojiStyle.APPLE;
|
|
17899
|
+
}
|
|
17900
|
+
|
|
17870
17901
|
return getEmojiUrl(unified, emojiStyle);
|
|
17871
17902
|
},
|
|
17872
|
-
|
|
17903
|
+
imageUrl: getEmojiUrl(unified, activeEmojiStyle != null ? activeEmojiStyle : exports.EmojiStyle.APPLE),
|
|
17904
|
+
isCustom: false,
|
|
17905
|
+
names: names,
|
|
17873
17906
|
unified: unified,
|
|
17874
17907
|
unifiedWithoutSkinTone: emojiUnified(emoji)
|
|
17875
17908
|
};
|
|
@@ -18181,13 +18214,6 @@ function ClickableEmojiButton(_ref) {
|
|
|
18181
18214
|
}, children);
|
|
18182
18215
|
}
|
|
18183
18216
|
|
|
18184
|
-
function isCustomCategory(category) {
|
|
18185
|
-
return category.category === exports.Categories.CUSTOM;
|
|
18186
|
-
}
|
|
18187
|
-
function isCustomEmoji(emoji) {
|
|
18188
|
-
return emoji.imgUrl !== undefined;
|
|
18189
|
-
}
|
|
18190
|
-
|
|
18191
18217
|
function EmojiImg(_ref) {
|
|
18192
18218
|
var emojiName = _ref.emojiName,
|
|
18193
18219
|
style = _ref.style,
|
|
@@ -18243,7 +18269,7 @@ function ViewOnlyEmoji(_ref) {
|
|
|
18243
18269
|
return React.createElement(EmojiImg, {
|
|
18244
18270
|
style: style,
|
|
18245
18271
|
emojiName: unified,
|
|
18246
|
-
emojiStyle:
|
|
18272
|
+
emojiStyle: exports.EmojiStyle.NATIVE,
|
|
18247
18273
|
lazyLoad: lazyLoad,
|
|
18248
18274
|
imgUrl: emojiToRender.imgUrl,
|
|
18249
18275
|
onError: onError
|
|
@@ -19745,9 +19771,10 @@ function ExportedEmoji(_ref) {
|
|
|
19745
19771
|
emojiStyle = _ref$emojiStyle === void 0 ? exports.EmojiStyle.APPLE : _ref$emojiStyle,
|
|
19746
19772
|
_ref$lazyLoad = _ref.lazyLoad,
|
|
19747
19773
|
lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
|
|
19748
|
-
getEmojiUrl = _ref.getEmojiUrl
|
|
19774
|
+
getEmojiUrl = _ref.getEmojiUrl,
|
|
19775
|
+
emojiUrl = _ref.emojiUrl;
|
|
19749
19776
|
|
|
19750
|
-
if (!unified) {
|
|
19777
|
+
if (!unified && !emojiUrl && !getEmojiUrl) {
|
|
19751
19778
|
return null;
|
|
19752
19779
|
}
|
|
19753
19780
|
|
|
@@ -19756,7 +19783,9 @@ function ExportedEmoji(_ref) {
|
|
|
19756
19783
|
size: size,
|
|
19757
19784
|
emojiStyle: emojiStyle,
|
|
19758
19785
|
lazyLoad: lazyLoad,
|
|
19759
|
-
getEmojiUrl:
|
|
19786
|
+
getEmojiUrl: emojiUrl ? function () {
|
|
19787
|
+
return emojiUrl;
|
|
19788
|
+
} : getEmojiUrl
|
|
19760
19789
|
});
|
|
19761
19790
|
}
|
|
19762
19791
|
|