InstantSearch / React / V6 / API reference

QueryRuleCustomData | React InstantSearch V6 (Deprecated)

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

Signature

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

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

Required
Type: function

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

Optional
Type: function

Transforms the items to display.

Copy 
1
2
3
4
5

<QueryRuleCustomData
  transformItems={items => items.filter(item => Boolean(item.banner))}
>
  {/* ... */}
</QueryRuleCustomData>
Did you find this page helpful?