Name
Main Pipeline
Select an Index
Description
API Credentials
Choose an existing API credential

Use this starter Sandbox to follow along - [https://codesandbox.io/s/47ikt4?file=/public/index.html&from-sandpack=true](https://codesandbox.io/s/47ikt4?file=/public/index.html&from-sandpack=true)

Notice <SearchPlugin /> is the component being rendered on the root path.

We'll add our custom component right inside "<ReactiveBase />"

The code snippet is a ReactiveComponent that will set a term query, more precisely, it'll set the genre to "Documentary" on the click of a button.

The expectation is the language facet and the results should update as the query is triggered.

Read more about ReactiveComponent here - [https://docs.reactivesearch.io/docs/reactivesearch/v3/advanced/reactivecomponent/](https://docs.reactivesearch.io/docs/reactivesearch/v3/advanced/reactivecomponent/)

In the preview window, notice the custom component renders a button that says "Apply Documentary Genre"

Now, we need to add our component's ID to "react" prop of filter(s) and result components, to make them react to our component's query.

🎦  Apply Documentary Genre
Language Filter
No items Found
No Results Found!

Filters are rendered by the Filter.js component file.

Navigate to "components > Filters.js" to change react prop for filter components.

Within Filters.js, search for usage of "react" prop

Press [[cmd]] + [[f]]

Type "react={"

Append 'myReactiveComponent' to react prop's 'and' key at all the places.

Making Result component react to our custom ReactiveComponent

Look for the <ResultLayoutByCategory /> component in the file, this component is responsible for rendering the results on the UI.

Under the hood, <ReactiveList />(part of @appbaseio/reactivesearch lib) component renders the results, <ResultLayoutByCategory /> acts as a wrapper around <ReactiveList /> to handle numerous things internally.



                  ...newProps

provide the "react" key to "componentProps" prop.

By default, the component <ResultLayoutByCategory /> component automatically sets the react prop's value by computing it internally based on the preferences object(checkout /utils/constant.js file).

In this case, we want to take charge and provide the 'react' prop's value manually to append our own component's id.

Thus, manually provide all the component IDs of the components you wish the results should react to.

Hint: look for components' IDs in preferences object(/utils/constant.js)

We're done setting things up.

Click "🎦  Apply Documentary Genre"

As visible, the results and filter component reacted to our custom component's query.

Preview - after applying ReactiveComponent query and selecting a language facet

Awesome 👏🏻 , we did it! 😎

Starter Codesandbox link -  [https://codesandbox.io/s/47ikt4?file=/public/index.html&from-sandpack=true](https://codesandbox.io/s/47ikt4?file=/public/index.html&from-sandpack=true)

Final Sandbox link - [https://codesandbox.io/s/reactivesearch-shopify-plugin-forked-6giew3?file=/src/components/Search.js:12948-13278](https://codesandbox.io/s/reactivesearch-shopify-plugin-forked-6giew3?file=/src/components/Search.js:12948-13278)

ReactiveComponent Docs link - [https://docs.reactivesearch.io/docs/reactivesearch/v3/advanced/reactivecomponent/](https://docs.reactivesearch.io/docs/reactivesearch/v3/advanced/reactivecomponent/)

Programatically adding an arbitrary facet filter - ES