You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Removed customization props, moved to SASS variables
12
+
* Improved filtering performance
13
+
14
+
9
15
```
10
16
npm i emoji-picker-react --save
11
17
```
12
18
13
19
An easy to use React Emoji Picker Module.
14
-
For easy integration with your app, you should consider using the companion package: [React Text field components with emoji picker](https://www.npmjs.com/package/emoji-picker-textfield).
@@ -32,22 +38,38 @@ class MyComponent extends Component {
32
38
33
39
```
34
40
35
-
## Customization
41
+
## UI Customization
42
+
You can use custom CSS to modify each part of the picker's visibility.
43
+
**COMPATABILITY NOTE**
44
+
The markup of the picker is guaranteed to stay unchanged through each major version (with the exception of bugfixes), meaning you can safely assume the markup stays the same until version 3 gets released.
36
45
37
-
## Modifying the picker's height and width
38
-
By default the picker is 240px wide and ~315px tall (depending on the position of the categories panel). To change the width and height of the picker, simply:
46
+
### Customizatio via SCSS variables
47
+
If your project uses SCSS, you can more easily customize your picker's visibility using the predefined [SASS variables](https://github.com/ealush/emoji-picker-react/blob/master/src/base.scss) (click to see all variables).
48
+
To customize the picker using these variables, you will need to import the picker in two parts - js and css.
39
49
40
50
```js
41
-
<EmojiPicker width="315" height="280"/>
42
-
<EmojiPicker height="280"/>// width will default to 240
43
-
<EmojiPicker width="315"/>// height will default to 240
51
+
// MyComponent.js
52
+
importEmojiPickerfrom'emoji-picker-react';
53
+
import'emoji-picker-react/dist/universal/style.scss'; // or any other way you consume scss files
54
+
55
+
classMyComponent {
56
+
// ...
57
+
}
44
58
```
45
59
46
-
If you chose a width that cannot fit a whole emoji at the end of each row (when you only leave room for 6.5 emojis, for example), the line will end at the last fully visible emoji, possibly leaving some empty space on the right. To resolve that, just increase or decrease the width of the picker to reach a perfect fit.
60
+
Then you will need to import the stylesheet file from your own stylesheet, and override the default variables with your own.
47
61
48
-
A word on height: The height you determine by the height property, is of the emoji-list only, the search and categories panel are added to the height you specify.
62
+
```scss
63
+
// style.scss
64
+
$size_emoji: 10px;
65
+
$width_picker: 300px;
66
+
$height_picker: 350px;
67
+
$bg_picker: #f1f1f1;
68
+
@import'./node_modules/emoji-picker-react/dist/universal/style.scss'; // relative path to your node modules
The per emoji diversity gets triggered on hover or long click by default. By passing the prop `disableDiversityPicker` to the picker, it will be disabled and not get triggered.
75
97
76
98
```js
77
99
<EmojiPicker disableDiversityPicker/>
78
100
```
79
101
80
-
## Moving the categories panel around
81
-
82
-
```js
83
-
<EmojiPicker nav="top"/>// default. no need to pass nav="top"
84
-
<EmojiPicker nav="left"/>
85
-
<EmojiPicker nav="bottom"/>
86
-
```
87
-
88
102
## Preloading all images
89
103
By default, each emoji category is loaded when first viewing it to reduce initial load time and improve perceived performance. This can sometimes take a while. In some cases you would want to load all images at once, for example, when lazy loading the picker in the background regardless of user interaction.
90
104
@@ -140,7 +154,7 @@ and then, in your onEmojiClick callback:
0 commit comments