Emoji Picker React Versions Save

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

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

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: https://github.com/ealush/emoji-picker-react/issues/50

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

Use it like this:

<Picker preload/>

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

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.

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.

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 for cases where there are no filter results