API Reference / React InstantSearch Widgets / QueryRuleCustomData
Apr. 24, 2019

QueryRuleCustomData

Widget signature 
<QueryRuleCustomData
  children={function}
  // Optional parameters
  transformItems={function}
/>
See code examples
See Live example

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 #

Copy
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.
Copy
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.
Copy
1
2
3
4
5

<QueryRuleCustomData
  transformItems={items => items.filter(item => Boolean(item.banner))}
>
  {/* ... */}
</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 />

See code examples

Create a React component#

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

Provided Props#

items #
type: object[]

The items that matched the query rule.
Copy
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.
Edit
Copy 
1
2
3

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

Full example#

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

HTML output#

Copy
1

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

Did you find this page helpful?

React InstantSearch v5