feat: added virualization and added search hook

[GowthamTG]

This PR contains the following

1. useEmojiSearch where it will allow to search on top of all the emojis

Sept.9.Screen.Recording.mov

2. virualization where it will only render the category which is visible on the DOM

#299

Sept.9.Screen.Recording.1.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
emoji-picker-react	❌ Failed (Inspect)			Jan 10, 2025 5:05am

[GowthamTG]

@ealush can you please help merge this PR

[GowthamTG]

@ealush can you please help merge this PR

[GowthamTG]

@ealush Can you please check this PR and let me know if there's anything that needs to be done

[ealush]

Hi Sorry for taking the time with this, I was unable to allocate much time for open source work recently due to work and travel. I will prioritize reviewing this.

…

On Wed, 4 Dec 2024 at 6:44 Gowtham T G ***@***.***> wrote: @ealush <https://github.com/ealush> Can you please check this PR and let me know if there's anything that needs to be done — Reply to this email directly, view it on GitHub <#439 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACV32P7ZEX24QNJYJD53VM32D2QEZAVCNFSM6AAAAABN3WK4OWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMJWGMZDQMBSHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ealush]

First of all @GowthamTG thank you for showing interest in contributing to the picker. It must have been challenging to enter a foreign codebase and still make yourself productive. Kudos. Again, sorry for taking the time reviewing this. I was busy with work and travel the past three months and could not spare much time for unplanned OSS work.

Now, there are a lot of things to consider here, since these are really two distinct changes that don't necessarily need to be presented to the picker together.

I will make both comments here:

Virtualization

I am all for that! Very happy to see that you were able to pull that off quite smoothly, but with that, I do see several challenges.

1. Highlighting of the currently visible category is now gone. This is an important feature of the picker, and that needs to be fixed.
   Try comparing the picker here: https://ealush.com/emoji-picker-react/ to your revision and see that this is now not visible

2. **Network and preloading** When we don't preload all categories, we also don't preload all emoji images. I just tested the change with a throttled network, and this is what I saw when scrolling down: This is very unexpected, and we should account for that when supporting virtuzlization. Emojis should still preload. 3. **Keyboard navigation broke** Keyboard navigation of emojis scrolls the picker up and down above and below the viewport. With virtualization added, it doesn't work anymore for scrolling up, but instead, it exists up to the category list.

Search hook

As something that's not a distinctly a picker feature, I do not fully understand the usecase, so I would love to understand

1. Why does it need to be a hook? Can't it just be a function that retrieves items from the emoji list?
2. There's an existing useFilter hook, does the search logic in the hook not work correctly for this use case? - Why create new filtering logic? The search hook also supports the custom emojis irrc
3. Filter doesn't work correctly, or is capped:
   The function seems to be returning up to 10 values when there are more:

[GowthamTG]

Hi @ealush
Thank you so much for taking your time to review ! I've addressed all the virtualisation issues you mentioned:
Apologies it too some time for me to get started again

Virtualisation

Category Highlighting : I've restored the category highlighting functionality by implementing a tracking mechanism that determines the currently visible category based on scroll position within the virtualised list. This now matches the behavior seen on the reference implementation.

Network and Preloading : I've implemented proper preloading for emoji images even with virtualization. The emojis now preload in the background regardless of their viewport visibility, preventing the blank image issue on slow networks. This maintains the smooth scrolling experience users expect.

Keyboard Navigation: Fixed the keyboard navigation to work properly with virtualization. The up/down navigation now correctly scrolls items into view even when they're outside the virtualised viewport.

useEmojiSearch

The motivation behind adding a separate search hook is to provide a headless search functionality that many applications need. While the existing useFilter hook works great for the picker's internal filtering, having a dedicated search hook serves a different use case:

It allows applications to implement emoji search in their editors/inputs without embedding the full picker
It's similar to what emoji-mart provides, making it easier for developers to migrate
Many popular apps (Slack, GitHub, WhatsApp, etc.) have emoji autocomplete in their editors, and this hook would power those dropdown suggestions
The hook is separate from useFilter because:

It's focused solely on search functionality without picker-specific logic
It can be used independently in different UI contexts (dropdowns, autocomplete, etc.)
It follows the headless UI pattern where the useFilter is tied to the picker is someways but I have reused the same functions as useFilter.

Please do let me know if you would like me to adjust any of these implementations further or provide more details about specific aspects?