Custom widget, callback when state.refine is defined

Hi all, I’m trying to develop a custom widget that is initialized with a default query. that query is passed with a @Input parameter.

I would like to call the refine as soon as the method is available but I don’t see an example in the documentation.

Could you please share an example?

Hi!

We have a full guide on how to create a new InstantSearch widget.
Here’s, for example, how to do it with InstantSearch.js.

In your case, you could leverage the init lifecycle step to update the search state by manipulating the helper.

function myCustomWidget({ initialQuery }) {
  return {
    init({ helper }) {
      helper.setQuery(initialQuery).search();
    },
    // other lifecycle steps
  };
}

search.addWidgets([myCustomWidget({ initialQuery: "Hello!" })]);

Does this help?

Hi Sarah, could you share an example for the angular-instasearch?

I just would like to extend the connectSearchBox / know when the refine function is ready in order to trigger the query with the default value.

Hi @ivan1

You can create a custom component with connectSearchBox in Angular InstantSearch.
If you’re on Angular InstantSearch v3, you can read this.
If you’re on Angular InstantSearch v2, here’s the guide.

Let me know how it goes.