Create Your Own Angular InstantSearch Widgets

Creating Angular InstantSearch widgets is the third layer of Algolia’s API. Read about the two others possibilities in the main concepts guide.

When to create widgets?

You can create completely new widgets with new behaviors that aren’t available in the existing widgets. Don’t create new widgets if all you want is extending widgets like redefining the DOM of existing widgets.

How to create a new widget

To create new widgets, the process is the same as for extending widgets, but instead of reusing an existing connector you would create your own connector.

The most simple connector starts with the following boilerplate.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const connector = (renderFn, unmountFn) => (widgetParams = {}) => ({
  init({ instantSearchInstance }) {
    renderFn(
      {
        /* anything you put here ends up in this.state */
      },
      true
    );
  },

  render({ results, instantSearchInstance }) {
    renderFn(
      {
        /* anything you put here ends up in this.state */
      },
      false
    );
  },

  dispose() {
    unmountFn();
  },
});

The best way to learn connectors is to look at existing ones, for example, the stats connector in the InstantSearch.js project.

Head over to the Discord server if you have more questions about creating your own widget.