There have been updates to the enzyme monorepo:

• • The devDependency enzyme was updated from 3.9.0 to 3.10.0.

• The devDependency enzyme-adapter-react-16 was updated from 1.14.0 to 1.15.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Why can i not add a style with that:
<Picker style={{width: 500}} onEmojiClick={this.onEmojiClick} />

Is there a way to get the emoji by a given unified code? I can't store the emoji itself, but the unified code i do.

Both in my app and on a mobile browser in the demo (https://ealush.github.io/emoji-picker-react/), searching returns no results

The devDependency eslint-plugin-react was updated from 7.13.0 to 7.14.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency eslint-plugin-react was updated from 7.12.4 to 7.13.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

There are three images there are getting an error on console.

https://cdn.jsdelivr.net/gh/iamcal/emoji-data@master/img-apple-64/2640-fe0f.png
https://cdn.jsdelivr.net/gh/iamcal/emoji-data@master/img-apple-64/2642-fe0f.png
https://cdn.jsdelivr.net/gh/iamcal/emoji-data@master/img-apple-64/2695-fe0f.png

I don't think this impact on the component, but I'm curious, would this component work on a intranet?

Hello @ALL, thanks for the nice package, this package works perfectly on mac os & iOS but it's not working on a windows system, Any help?

Hello, if I'd want to load one personalized emoji to show it with the others, can I do that?

Creating a new group with the name we want and assign images and values ​​to group.

document is not defined

const [chosenEmoji, setChosenEmoji] = useState(null);
const [mounted, setMounted] = useState(null);

useEffect(() => setMounted(true), []);

.......

                        {mounted &&

                            <Fragment>

                                <Picker onEmojiClick={(event, emojiObject) => {
                                    setChosenEmoji(emojiObject);
                                }}/>

                                {chosenEmoji.emoji}

                            </Fragment>

                        }

I need to click twice to trigger onEmojiClick

Some of the PNG from your set are not being served by the CDN:

EG: https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/263a-fe0f.png

<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>387806EF168052A6</RequestId>
<HostId>
SseLs5gyr8xkv/JthqB8cSmhEZfivql2D7MndRDMXHRQHgTL3UJhRlFVjCUnxvs1PEJmKp2RsSM=
</HostId>
</Error>

There have been updates to the enzyme monorepo:

• • The devDependency enzyme was updated from 3.9.0 to 3.10.0.

• The devDependency enzyme-adapter-react-16 was updated from 1.14.0 to 1.15.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Some of the smiles are duplicated. Is this a bug or a feature?

Make Emoiji Groups labels properties for internationalization purposes: ["smileys & people","animals & nature","food & drink","travel & places","activities","objects","symbols","flags"]

ex: travelAndPlaces: "Lugares e Viagens"

Parent component:

const [value, setValue] = useState();
...
const someAction = () => {
setValue(123)
}

const emojiHandle = () => {
console.log(value) //display undefined
}
...
...
return(
...
<Emoji callback={handleEmojiChange} /> // -> child component :  onEmojiClick={callback}
<button onClick={someAction}>Press me 1st</button>
)

So, problem is that State is undefined on child component callback.
Reproduction:
Press the button to set state.
Then press on any Emojy to execute callback from parent component and display state.
Callback will show undefined state, which you already set when you press the button.

How to get access to state?

Calling most emojis from its objects work as expected, but it seems like flags from countries only appear as letters, for example, when selecting the flag of "Brazil", the chosenEmoji.emoji from it shows the letters "BR", the same as other country flags;

Hey! I love the component, but I'm wondering why you can't also add the actual emoji selected and add it to the returned object when you pick the emoji?

Having to render an image from a CDN for every emoji you want to render seems too expensive...

I'm using emoji-picker-react together with emoji-js in a project and I want to put the emoji images on a CDN. I am having issues however, since images are missing.

Emoji 🏃 for example. When I inspect the image URL in the picker it is the following URL:

https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/1f3c3.png (which exists)

The parser (emoji-js) however generates the following URL:

https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/1f3c3-200d-2642-fe0f.png (which does not exist)

I am using the following version:

                "emoji-js": "^3.4.1",
                "emoji-picker-react": "^2.1.1",

The devDependency svg-url-loader was updated from 2.3.2 to 2.3.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

svg-url-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

How to hide(or disable) skinTone picker?
Image

Hi! I was recently trying the latest version 3.1.6 of the emoji picker and the searchbar has the autofocus enabled by default. IMHO, this should be up to the developer as in some scenarios, e.g., Safari iPhone, the autofocus is handled by auto-zooming in if the font-size is below a specific threshold (I think if lower than 16px). I suggest to have a prop "autofocus" to be set to true or false in order to have more flexibility (maybe it would be interesting to have also a prop for font-sizes, or to enable/disable the search bar).

By the way, is there any workaround at this moment to disable the autofocus on searchbar?

Thanks in advance!

Hello!

I want to use i18n, but the ts shows an error that the groupNames object is not in props

export interface IEmojiPickerProps {
    onEmojiClick: (event: MouseEvent, data: IEmojiData) => void;
    emojiUrl?: string;
    preload?: boolean;
    skinTone?: SkinTones;
    disableAutoFocus?: boolean;
    disableSearchBar?: boolean;
    disableSkinTonePicker?: boolean;
  }

The devDependency prop-types was updated from 15.6.2 to 15.7.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

prop-types is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

To Improve user experience on some applications, the emoji picker needs to be closed when it loses its focus, it can be an opt in feature though... If this already exist please let me know or i can work on this as well.

First this Component is awesome THANK YOU!
My asset path uses .svg at the end of the url but the component uses .png...

There have been updates to the enzyme monorepo:

• • The devDependency enzyme was updated from 3.9.0 to 3.10.0.

• The devDependency enzyme-adapter-react-16 was updated from 1.14.0 to 1.15.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

There have been updates to the enzyme monorepo:

• • The devDependency enzyme was updated from 3.9.0 to 3.10.0.

• The devDependency enzyme-adapter-react-16 was updated from 1.13.2 to 1.14.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

How can i set event.preventDefault to onEmojiClick callback?

Hello,

I written typescript declaration file for my own project. It can help to people:

emoji-picker-react.d.ts

declare module 'emoji-picker-react' {
  import React from "react";

  export const SKIN_TONE_NEUTRAL = 'neutral';
  export const SKIN_TONE_LIGHT = '1f3fb';
  export const SKIN_TONE_MEDIUM_LIGHT = '1f3fc';
  export const SKIN_TONE_MEDIUM = '1f3fe';
  export const SKIN_TONE_MEDIUM_DARK = '1f3ff';
  export const SKIN_TONE_DARK = '1f3fd';

  export interface IEmojiData {
    unified: string,
    originalUnified: string,
    names: Array<string>,
    emoji: string,
    activeSkinTone: string
  }

  export interface IEmojiPickerProps {
    onEmojiClick: Function,
    emojiUrl?: string,
    preload?: boolean,
    skinTone?: SKIN_TONE_NEUTRAL | SKIN_TONE_LIGHT | SKIN_TONE_MEDIUM_LIGHT | SKIN_TONE_MEDIUM | SKIN_TONE_MEDIUM_DARK | SKIN_TONE_DARK
  }

  const EmojiPicker: React.FC<IEmojiPickerProps> = (props: IEmojiPickerProps) => {};
  export default EmojiPicker;
}

Title. I've tried the demo and it takes a second or more on each keystroke to update UI.

I know that Loading the Picker needs some time, but if the component unmount during the Picker rendering, I will see this warning in broswer console. Is there any way that I can do when the component is unmount ?

Apparently I use babel-polyfill in my own project too. Yet I don't find your config in webpack.config.js, how do i unuse it?

There have been updates to the enzyme monorepo:

• • The devDependency enzyme was updated from 3.9.0 to 3.10.0.

• The devDependency enzyme-adapter-react-16 was updated from 1.15.0 to 1.15.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The packages works fine on safari version 13.1 but it crashes on older versions like 12.0.3.
I am attaching a screenshot below for the error i get in the console.

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

The component itself is really good, but since there are many stickers to load, it takes a time to load the component, it would be awesome to have a property to open the modal with the emojis, but show a Loading while the emojis are loading (not all emojis of course).

something like:

<Picker showLoading={true} />

Thanks for developing and sharing this awesome package!

I'm trying to use this package using yarn, but while building I get following errors

✖ ｢atl｣: Checking finished with 9 errors
[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:12:7 
    TS2749: 'SKIN_TONE_NEUTRAL' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_NEUTRAL'? 

[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:13:7 
    TS2749: 'SKIN_TONE_LIGHT' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_LIGHT'? 

[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:14:7 
    TS2749: 'SKIN_TONE_MEDIUM_LIGHT' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_MEDIUM_LIGHT'? 

[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:15:7 
    TS2749: 'SKIN_TONE_MEDIUM' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_MEDIUM'? 

[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:16:7 
    TS2749: 'SKIN_TONE_MEDIUM_DARK' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_MEDIUM_DARK'? 

[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:17:7 
    TS2749: 'SKIN_TONE_DARK' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_DARK'? 

[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:38:9 
    TS2322: Type '(props: IEmojiPickerProps) => void' is not assignable to type 'FC<IEmojiPickerProps>'.
  Type 'void' is not assignable to type 'ReactElement<any, any>'. 

[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:38:52 
    TS1039: Initializers are not allowed in ambient contexts. 

[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:40:8 
    TS1183: An implementation cannot be declared in ambient contexts. 

How do I solve this? I'm using typescript version 3.9.7, yarn version 1.22.4 and webpack version 3.3.11. Happy to provide more information.

Thank you!
Kuldeep

We tried to use the picker but we noticed that the default config is 160px for an emoji picker is too much.

We suggest to use a 16px or 32pxso the file size is reduced onload. That can be the reason why performance is affected.

i just install this lib and run my project and i got this error

Clicking on an emoji changes the router location by adding the "#!" which then triggers re-render on all router dependent components (React Router 4.4.0, react-router-dom 4.4.2, emoji-picker-react 1.7.1, react 16)

Hello, when I enter this :) I received the following error

I went to check the impact of adding this as a dependency to my app using bundlephobia. It reported that react was not listed as a dependency or peerDependency so could not complete the request.

For something like this I would consider adding react as peerDependency is thing something you are willing to do? I am happy to make a PR if so.

I wanted to use this fantastic picker in my project, but I can't because of the license.
There is any reason to be unlicensed?

The proptype for preload should be .bool as in the current github version instead of boolean in the published version.

EmojiPicker.propTypes = {
    ...
    preload: PropTypes.boolean
};