API Reference / React InstantSearch Widgets / QueryRuleCustomData
Aug. 23, 2019

QueryRuleCustomData

Widget signature
<QueryRuleCustomData
  children={function}
  // Optional parameters
  transformItems={function}
/>

About this widget

The QueryRuleCustomData widget displays custom data from Rules.

You may want to use this widget to display banners or recommendations returned by 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>

Props

children
type: function
Required

Renders each item from the Query Rule custom data. This function is called with the items prop and must return a React node.

1
2
3
4
5
6
7
8
9
<QueryRuleCustomData>
  {({ items }) =>
    items.map(item => (
      <section key={item.title}>
        <h2>{item.title}</h2>
      </section>
    ))
  }
</QueryRuleCustomData>
transformItems
type: function
Optional

Transforms the items to display.

1
2
3
4
5
<QueryRuleCustomData
  transformItems={items => items.filter(item => Boolean(item.banner))}
>
  {/* ... */}
</QueryRuleCustomData>

HTML output

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

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

items
type: object[]

The items that matched the query rule.

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

Create and instantiate your connected widget

const CustomQueryRuleCustomData = connectQueryRules(QueryRuleCustomData);

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

Exposed Props

transformItems
type: function
Optional

Transforms the items to display.

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);

Did you find this page helpful?