Programatically adding an arbitrary facet filter - ES | Scribe

    Programatically adding an arbitrary facet filter - ES

    • Siddharth Kothari |
    • 0 step |
    • 4 minutes
    Navigate to your Search UI page
    Open "Code Editor"
    Open the app in Codesandbox
    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)
    Navigate to "App.js"
    Notice <SearchPlugin /> is the component being rendered on the root path.
    Click "components"
    Open "Search.js"
    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/)
    Paste the component code snippet
    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.
    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

    Navigate to "Search.js"
    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.

    Want to make guides like this in seconds? Yes, it's really that fast.

    This Scribe is in tip-top shape!Leave feedback if there are any issues with this Scribe