Searching outside of <InstantSearch>

I’m looking to integrate Algolia into my existing React App, which already contains many routes and components.
All of the examples require the <SearchBox/> component to be wrapped inside the <InstantSearch/> component.

However, my search input will appear site wide and lives inside the header. I was wondering if it was possible to link a search box to <InstantSearch/> in order to trigger a search.
I understand that I could wrap my entire app under the InstantSearch component but this feels like a really hacky way of doing things.
Or would I be better off using the API wrappers instead?

Thanks for any help,

Hi @development2,

Yes you are right all the widgets need to be under the <InstantSearch> in order to have access to the context that the root component provide.

Could you share with us why you think that’s a hacky way of doing this? Since your application require to have the SearchBox in the header it means that your App needs to be aware of InstantSearch. If you have already use react-redux or react-router it follows the same strategy. You need to wrap your application with a Provider in order to allow children to communicate with it.

Thanks! :slightly_smiling_face:

Hi @samuel.vaillant, thanks for the response.

To me, having the ability to search is just one aspect of an SPA, whereas it makes more sense in logic terms that the app needs to know about routing and the global store at all times. So it seems strange to have to wrap the entire app around it in this way. It just seems odd that i’m unable to create a bind or reference to the <InstantSearch/> component to be able to tell it what i’m searching for.

Do you have any examples of larger app’s where it’s used in this way?

At the moment I’ve gone down the API reference route and got it working, but obviously i’d much prefer to use InstantSearch as it does a lot of the heavy lifting for me.


HI @development2,

Maybe I didn’t fully understand your need.

What do you want to achieve with the <SearchBox>? You want to display some results on the page as soon as the user start typing in the input? Or maybe you want to redirect the user on a results page only when the user submit the input? What is the use case?

Thanks for the precision!

Hi @samuel.vaillant,

I don’t need the ability to instant search from the first character. This would most likely be a user triggered search which redirected them to the results page upon hitting the enter key.
Once in to the results page I’m then looking in to adding various filters (facets) to constrain the results further.

We’ll have around 100,000 records in our index.

Hi @development2,

Thanks a lot for the clarification! I didn’t fully understand your need in the first place.

You can definitely do it but you will need to save the state of the input somewhere (Redux? React State? It doesn’t matter). Then on your results page you can pass the value as a defaultRefinement for the <SearchBox> widget. It will trigger the initial search with the given value.

You can take a look at this example in CodeSandbox, in order to have a better idea.

Hi @samuel.vaillant,

Thanks for this. I’ll investigate it in more detail and report back!

Wow i have looking for this solution for a simpler way of doing this, could you provide and example for Vue.js?

Hi @davidigonzalez1
For Vue InstantSearch, you can store the query in your component state and pass it to

<input type="search" v-mode="myquery" />

   <ais-configure v-bind:query="myquery" /> 
   <!-- ... -->

Here is a fully working example:
I hope this helps!