API Reference / React InstantSearch / QueryRuleCustomData

QueryRuleCustomData

Signature 
<QueryRuleCustomData
  children={function}
  // Optional parameters
  transformItems={function}
/>
Import
Copy 
1

import { QueryRuleCustomData } from 'react-instantsearch-dom';
See code examples
See live example

About this widget

We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.

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

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>

HTML output

Copy 
1

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

Customize the UI with 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 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.
Copy 
1
2
3

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

Full example

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);
Did you find this page helpful?
React InstantSearch v6