Would kbar be a right fit for a search performing API fetches?

[Fryingpannn]

Hi, I'm making an app that is a "search engine". In regular React, you would use value and onChange to set the query value and fetch results, from an external API, based on the current value in the search bar.

Can I achieve this with kbar? I have a fetch function I'd like to call onChange of the value in the kbar search.

Thanks!

[vsnthdev]

I'm loading 500+ actions into kbar on page load, along with search functionality through an external API and it works flawlessly ✨

The useKBar() hook takes in a debounced callback which fetches data from an API while taking in user typed search query from state.searchQuery.

The data from fetch call then can be saved into Redux store or useState(). Then you can use useRegisterActions() to dynamically add more actions to KBar from an API 👌

[Fryingpannn]

I'm loading 500+ actions into kbar on page load, along with search functionality through an external API and it works flawlessly ✨

The useKBar() hook takes in a debounced callback which fetches data from an API while taking in user typed search query from state.searchQuery.

The data from fetch call then can be saved into Redux store or useState(). Then you can use useRegisterActions() to dynamically add more actions to KBar from an API 👌

Thanks for the reply! I see, so when receiving the data from fetch, would you map over it to transform it all into the action structure (e.g. id, name, action), then pass that to useRegisterActions() to add more search results?

The data return from fetch for me are exactly the data I want to display in the search results. So I'm wondering if I need to use useRegisterActions, perhaps just pass data directly to KBarResults?

[vsnthdev]

Yes, I'd map through the data received from fetch call into an Action that can be passed on to useRegisterActions() hook.

Personally I don't recommend directly pushing ActionImpl | string into KBarResults as that is not in the documentation.

I guess @timc1 can give a more clear explanation here.

[timc1]

Yes exactly @vsnthdev. You can asynchronously add/remove actions based on some external result. Using the provided hook will do you well as cleanup is also managed.

[vsnthdev]

@timc1 This is by far the best command palette component I've found 👏

Going to add it to https://github.com/brillout/awesome-react-components today 🚀