InstantSearch / React / V6 / API reference

QueryRuleCustomData | React InstantSearch V6 (Deprecated)

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

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?