MAJOR: V4

https://codesandbox.io/s/emoji-picker-react-4-z2gkzp

[PATCH][BUGFIX] 2.0.2

To support the diversities picker long-click functionality, I used onMouseDown, and remove the click handler, meaning nothing prevents its default.

Clicking emojis added a shebang(#!) to the url, and in react router apps triggered a re-render.

Here I add a preventDefault handler for the picker that stops this from happening.

Related to:
#50

[PATCH][BUGFIX] 1.7.2

This is a bugfix for 1.7.x versions. New features will only be added to 2.0.x

To support the diversities picker long-click functionality, I used onMouseDown, and remove the click handler, meaning nothing prevents its default.

Clicking emojis added a shebang(#!) to the url, and in react router apps triggered a re-render.

Here I add a preventDefault handler for the picker that stops this from happening.

Related to:
#50

Major redesign

• Updated UI
• Removed customization props, moved to SASS variables
• Improved filtering performance

Add the ability to preload all emojis

Use it like this:

<Picker preload/>

Alternating scrollbar size

Automatically change the scrollbar size relative to the content of the picker.

Automatically open diversities menu after long hover

Along with the long click gesture, long hover on an emoji with diversities will trigger-open the diversities menu, making it easier to discover the feature, and actually realize the emoji has other diversities to choose from. The hover timeout is long enough to prevent the menu from opening too often.

Add support for custom picker size

Picker size can now increase or decrease by using the width and height props:

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:

<EmojiPicker width="315" height="280"/>
<EmojiPicker height="280"/> // width will default to 240
<EmojiPicker width="315"/> // height will default to 240

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.

Add skin tone indication to emojis with skin tones

Now, when hovering an emoji with multiple diversities, a blue dot will appear in the hover area, indicating that the emoji can be long-pressed to open the diversities menu.

Added empty state

Added empty state for cases where there are no filter results