CODEWITHSUNDEEP
reactjsuser-interfaceonclickalgolia
notacorn
notacorn

Reputation: 4099

Algolia SearchBox - I want it to show Hits only when the user selects the SearchBox

I'm almost certain I saw this behavior somewhere so I'm pretty sure it can be done. At the moment, I have a fully functional SearchBox element and below it, InfiniteHits. But I want the hits to start loading after the user clicks into the SearchBox (but hasn't typed anything yet).

If that's too difficult, I'm also okay with nothing displaying until the user enters text into the SearchBox.

At the moment, my train of thought was something like creating a <Configure hitsPerPage={}/> object, and then somehow manipulating the hitsPerPage through <SearchBox onClick={} />, but I haven't had any luck with that.

for some context, this is the general structure of my page:

<div>
    <InstantSearch>
        <div>
            <SearchBox/>
            <InfiniteHits/>
        </div>
    </InstantSearch>
</div>)

TLDR: I need help implementing one of the following behaviors for my SearchBox

1. No hits display until user clicks into SearchBox

2. No hits display until user enters text into SearchBox

Upvotes: 0

Views: 432

Answers (1)

xadm
xadm

Reputation: 8418

Initial search can be blocked - docs

When no results (or not searched) we can display null instead of <InfiniteHits/> using conditional rendering - docs example

You can always prepare own components.

Upvotes: 1

Related Questions