search

ealush / emoji-picker-react

The most popular React Emoji Picker
https://ealush.com/emoji-picker-react/
MIT License
991 stars 166 forks source link

Custom Emoji not render #397

Open chatGPTxx opened 5 months ago

chatGPTxx commented 5 months ago

First thanks so much for the great component! I'm using it in my react nextjs app, I added customEmojis in the "EmojiPicker" component. It works fine when emoji picker pops up and I can select my custom emojis. But when I use the selected custom emoji in "Emoji" by passing the unified value, it doesn't show. Only workaround I found is to show EmojiPicker once. But the issue with the workaround is it will then download all emojis which slows down my app. Could you please advise?

chatGPTxx commented 5 months ago

The custom emojis are in my /public/emojis folder, I set the custom emoji imgUrl as '/emojis/custom.png'

ealush commented 5 months ago

I see. Yes. This seems to be correct. I did not think of this use case. The reason is that the picker initially adds all the custom emojis to the global emojis map, otherwise, there is not much way for it to actually look it up by unified code.

In such a scenario, there might be some prep work on your end that would need to be done, such as: loadCustomEmojis(...), do it once on app load, and it should behave the same. would such a solution work for you? If so, I will work on it during the weekend.

chatGPTxx commented 5 months ago

Thanks for your quick response! I tried to download custom emojis to client side before initializing "EmojiPicker" I can see custom.png downloaded successfully from browser dev tool. But somehow they still can't be recognized by "Emoji" component.

Do you have recommended way to implement loadCustomEmojis? Or I will wait for your improvement when you get time.

chatGPTxx commented 4 months ago

Hi @ealush ,do you have plan when will you improve it? Or please kindly guide me how can I do it at my end. Thanks!