QueryRuleCustomData

About this widget

The QueryRuleCustomData widget displays custom data from Query Rules.

You may want to use this widget to display banners or recommendations returned by Query Rules, and that match search parameters.

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  import { QueryRuleCustomData } from 'react-instantsearch-dom';

  <QueryRuleCustomData>
    {({ items }) =>
      items.map(({ banner, title, link }) => {
        if (!banner) {
          return null;
        }

        return (
          <section key={title}>
            <h2>{title}</h2>
            <a href={link}>
              <img src={banner} alt={title} />
            </a>
          </section>
        );
      })
    }
  </QueryRuleCustomData>

Customize the UI - connectQueryRules

If you want to create your own UI of the QueryRuleCustomData widget or use another UI library, you can use connectors.

Connectors are higher-order components. They encapsulate the logic for a specific kind of widget and they provide a way to interact with the InstantSearch context.

They have an outer component API that we call exposed props, and they provide some other props to the wrapped components which are called the provided props.

This connector is also used to build other widgets: QueryRuleContext

It’s a 3-step process:

// 1. Create a React component
const QueryRuleCustomData = () => {
  // return the DOM output
};

// 2. Connect the component using the connector
const CustomQueryRuleCustomData = connectQueryRules(QueryRuleCustomData);

// 3. Use your connected widget
<CustomQueryRuleCustomData />

Create a React component

const QueryRuleCustomData = ({
  object[] items,
}) => {
  // return the DOM output
};

Provided Props

1
const QueryRuleCustomData = ({ items }) => JSON.stringify(items);

Create and instantiate your connected widget

const CustomQueryRuleCustomData = connectQueryRules(QueryRuleCustomData);

<CustomQueryRuleCustomData
  // Optional parameters
  transformItems={function}
/>

Exposed Props

1
2
3
<CustomQueryRuleCustomData
  transformItems={items => items.filter(item => Boolean(item.banner))}
/>

Full example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { connectQueryRules } from 'react-instantsearch-dom';

const QueryRuleCustomData = ({ items }) =>
  items.map(({ banner, title, link }) => {
    if (!banner) {
      return null;
    }

    return (
      <section key={title}>
        <h2>{title}</h2>

        <a href={link}>
          <img src={banner} alt={title} />
        </a>
      </section>
    );
  });

const CustomQueryRuleCustomData = connectQueryRules(QueryRuleCustomData);

1
<CustomQueryRuleCustomData />

HTML output

1
<div class="ais-QueryRuleCustomData"></div>