emoji-picker-react 4.1.0 → 4.2.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 +25 -21
- package/dist/DomUtils/classNames.d.ts +3 -1
- package/dist/components/emoji/Emoji.d.ts +4 -2
- package/dist/components/emoji/ExportedEmoji.d.ts +3 -1
- package/dist/config/cdnUrls.d.ts +1 -1
- package/dist/config/config.d.ts +2 -0
- package/dist/config/useConfig.d.ts +1 -0
- package/dist/dataUtils/emojiSelectors.d.ts +1 -2
- package/dist/emoji-picker-react.cjs.development.js +295 -259
- 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 +295 -259
- package/dist/emoji-picker-react.esm.js.map +1 -1
- package/dist/hooks/preloadEmoji.d.ts +2 -1
- package/package.json +1 -1
- package/src/DomUtils/classNames.ts +4 -2
- package/src/components/body/EmojiList.tsx +5 -1
- package/src/components/body/EmojiVariationPicker.tsx +13 -8
- package/src/components/body/Suggested.tsx +5 -2
- package/src/components/emoji/Emoji.tsx +17 -8
- package/src/components/emoji/ExportedEmoji.tsx +5 -2
- package/src/components/footer/Preview.tsx +9 -2
- package/src/components/header/Search.tsx +29 -10
- package/src/components/main/PickerMain.tsx +3 -3
- package/src/config/cdnUrls.ts +1 -1
- package/src/config/config.ts +4 -0
- package/src/config/useConfig.ts +8 -0
- package/src/dataUtils/emojiSelectors.ts +3 -10
- package/src/hooks/preloadEmoji.ts +5 -7
- package/src/hooks/useFilter.ts +8 -8
- package/src/hooks/useMouseDownHandlers.ts +19 -13
- package/src/hooks/useOnFocus.ts +4 -3
package/README.md
CHANGED
|
@@ -43,21 +43,22 @@ function App() {
|
|
|
43
43
|
|
|
44
44
|
The following props are accepted by them picker:
|
|
45
45
|
|
|
46
|
-
| Prop | Type
|
|
47
|
-
| ------------------- |
|
|
48
|
-
| onEmojiClick | function
|
|
49
|
-
| autoFocusSearch | boolean
|
|
50
|
-
| Theme | string
|
|
51
|
-
| emojiStyle | string
|
|
52
|
-
| defaultSkinTone | string
|
|
53
|
-
| lazyLoadEmojis | boolean
|
|
54
|
-
| previewConfig | object
|
|
55
|
-
| searchPlaceholder | string
|
|
56
|
-
| suggestedEmojisMode | string
|
|
57
|
-
| skinTonesDisabled | boolean
|
|
58
|
-
| `width` | number
|
|
59
|
-
| emojiVersion | `string`
|
|
60
|
-
| `height` | number
|
|
46
|
+
| Prop | Type | Default | Description |
|
|
47
|
+
| ------------------- | ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------- |
|
|
48
|
+
| onEmojiClick | function | | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter. |
|
|
49
|
+
| autoFocusSearch | boolean | `true` | Controls the auto focus of the search input. |
|
|
50
|
+
| Theme | string | `light` | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`. |
|
|
51
|
+
| emojiStyle | string | `apple` | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`. |
|
|
52
|
+
| defaultSkinTone | string | `neutral` | Controls the default skin tone. |
|
|
53
|
+
| lazyLoadEmojis | boolean | `false` | Controls whether the emojis are loaded lazily or not. |
|
|
54
|
+
| previewConfig | object | `{}` | Controls the preview of the emoji. See below for more information. |
|
|
55
|
+
| searchPlaceholder | string | `Search` | Controls the placeholder of the search input. |
|
|
56
|
+
| suggestedEmojisMode | string | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`. |
|
|
57
|
+
| skinTonesDisabled | boolean | `false` | Controls whether the skin tones are disabled or not. |
|
|
58
|
+
| `width` | number | `350` | Controls the width of the picker. |
|
|
59
|
+
| emojiVersion | `string` | - | Allows displaying emojis up to a certain version for compatibility. |
|
|
60
|
+
| `height` | number | `450` | Controls the height of the picker. |
|
|
61
|
+
| getEmojiUrl | `Function` | - | Allows to customize the emoji url and provide your own image host. |
|
|
61
62
|
|
|
62
63
|
## Full details
|
|
63
64
|
|
|
@@ -164,6 +165,8 @@ import { SkinTones } from 'emoji-picker-react';
|
|
|
164
165
|
- `"4.0"`
|
|
165
166
|
- `"5.0"`
|
|
166
167
|
|
|
168
|
+
* `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.
|
|
169
|
+
|
|
167
170
|
# Customization
|
|
168
171
|
|
|
169
172
|
## Custom Picker Width and Height
|
|
@@ -195,12 +198,13 @@ The picker exports an `Emoji` component. The emoji component is the same used wi
|
|
|
195
198
|
|
|
196
199
|
## Props
|
|
197
200
|
|
|
198
|
-
| Name
|
|
199
|
-
|
|
|
200
|
-
| `unified`
|
|
201
|
-
| `size`
|
|
202
|
-
| `emojiStyle`
|
|
203
|
-
| `lazyLoad`
|
|
201
|
+
| Name | Type | Default | Description |
|
|
202
|
+
| ------------- | ------------ | ------------------ | ------------------------------------------------------------------------------------------- |
|
|
203
|
+
| `unified` | string | "" | The unified code of the emoji. |
|
|
204
|
+
| `size` | number | 32 | The size of the emoji. |
|
|
205
|
+
| `emojiStyle` | `EmojiStyle` | `EmojiStyle.APPLE` | The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. |
|
|
206
|
+
| `lazyLoad` | boolean | `false` | Whether to lazy load the emoji. image |
|
|
207
|
+
| `getEmojiUrl` | Function | - | Allows to customize the emoji url and provide your own image host. |
|
|
204
208
|
|
|
205
209
|
```js
|
|
206
210
|
import { Emoji, EmojiStyle } from 'emoji-picker-react';
|
|
@@ -10,6 +10,8 @@ export declare enum ClassNames {
|
|
|
10
10
|
categoryContent = "epr-emoji-category-content",
|
|
11
11
|
emojiHasVariatios = "epr-emoji-has-variations",
|
|
12
12
|
scrollBody = "epr-body",
|
|
13
|
-
|
|
13
|
+
emojiList = "epr-emoji-list",
|
|
14
|
+
external = "__EmojiPicker__",
|
|
15
|
+
emojiPicker = "EmojiPickerReact"
|
|
14
16
|
}
|
|
15
17
|
export declare function asSelectors(...classNames: ClassNames[]): string;
|
|
@@ -14,7 +14,9 @@ declare type BaseProps = {
|
|
|
14
14
|
unified: string;
|
|
15
15
|
size?: number;
|
|
16
16
|
lazyLoad?: boolean;
|
|
17
|
+
getEmojiUrl?: GetEmojiUrl;
|
|
17
18
|
};
|
|
18
|
-
export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad }: ClickableEmojiProps): JSX.Element;
|
|
19
|
-
export declare function ViewOnlyEmoji({ emoji, unified, emojiStyle, size, lazyLoad }: BaseProps): JSX.Element;
|
|
19
|
+
export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, }: ClickableEmojiProps): JSX.Element;
|
|
20
|
+
export declare function ViewOnlyEmoji({ emoji, unified, emojiStyle, size, lazyLoad, getEmojiUrl, }: BaseProps): JSX.Element;
|
|
21
|
+
export declare type GetEmojiUrl = (unified: string, style: EmojiStyle) => string;
|
|
20
22
|
export {};
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { EmojiStyle } from '../../types/exposedTypes';
|
|
3
|
-
|
|
3
|
+
import { GetEmojiUrl } from './Emoji';
|
|
4
|
+
export declare function ExportedEmoji({ unified, size, emojiStyle, lazyLoad, getEmojiUrl, }: {
|
|
4
5
|
unified: string;
|
|
5
6
|
emojiStyle?: EmojiStyle;
|
|
6
7
|
size?: number;
|
|
7
8
|
lazyLoad?: boolean;
|
|
9
|
+
getEmojiUrl?: GetEmojiUrl;
|
|
8
10
|
}): JSX.Element | null;
|
package/dist/config/cdnUrls.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { EmojiStyle } from
|
|
1
|
+
import { EmojiStyle } from '../types/exposedTypes';
|
|
2
2
|
export declare function cdnUrl(emojiStyle: EmojiStyle): string;
|
package/dist/config/config.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { GetEmojiUrl } from '../components/emoji/Emoji';
|
|
1
2
|
import { EmojiClickData, EmojiStyle, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
|
|
2
3
|
import { CategoriesConfig } from './categoryConfig';
|
|
3
4
|
export declare function mergeConfig(userConfig?: PickerConfig): PickerConfigInternal;
|
|
@@ -17,6 +18,7 @@ export declare type PickerConfigInternal = {
|
|
|
17
18
|
previewConfig: PreviewConfig;
|
|
18
19
|
height: number;
|
|
19
20
|
width: number;
|
|
21
|
+
getEmojiUrl: GetEmojiUrl;
|
|
20
22
|
};
|
|
21
23
|
export declare type PreviewConfig = {
|
|
22
24
|
defaultEmoji: string;
|
|
@@ -5,10 +5,9 @@ export declare function emojiNames(emoji: DataEmoji): string[];
|
|
|
5
5
|
export declare function addedIn(emoji: DataEmoji): number;
|
|
6
6
|
export declare function emojiName(emoji: DataEmoji): string;
|
|
7
7
|
export declare function unifiedWithoutSkinTone(unified: string): string;
|
|
8
|
-
export declare function emojiUrl(emojiStyle: EmojiStyle, emoji: DataEmoji, skinTone?: string): string;
|
|
9
8
|
export declare function emojiUnified(emoji: DataEmoji, skinTone?: string): string;
|
|
10
9
|
export declare function emojisByCategory(category: Categories): DataEmojis;
|
|
11
|
-
export declare function emojiUrlByUnified(
|
|
10
|
+
export declare function emojiUrlByUnified(unified: string, emojiStyle: EmojiStyle): string;
|
|
12
11
|
export declare function emojiVariations(emoji: DataEmoji): string[];
|
|
13
12
|
export declare function emojiHasVariations(emoji: DataEmoji): boolean;
|
|
14
13
|
export declare function emojiVariationUnified(emoji: DataEmoji, skinTone?: string): string | undefined;
|