feat(queryRules): add QueryRuleCustomData widget [part 2]

[francoischalifour]

This is the 2nd PR in the series "Merchandized Query Rules".

Summary

This creates the QueryRuleCustomData widget, responsible for showing custom data (userData) coming from Query Rules.

Motivation

Read RFC →

Usage

Basic

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

With default banner

<QueryRuleCustomData
  transformItems={items => {
    if (items.length > 0) {
      return items;
    }

    return [
      {
        title: 'Kill Bill',
        banner: 'http://static.bobatv.net/IMovie/mv_2352/poster_2352.jpg',
        link: 'https://www.netflix.com/title/60031236',
      },
    ];
  }}
>
  {({ 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>

Stories

See stories →

Related

• React InstantSearch
  • connectQueryRules
• InstantSearch.js
  • connectQueryRules
  • queryRuleCustomData
  • queryRuleContext
• Merchandized Query Rules RFC

[algobot]

Deploy preview for react-instantsearch ready!

Built with commit e83ca8e

https://deploy-preview-2212--react-instantsearch.netlify.com