Banners

The Banners component allows you to display banners using Rules. With Rules, you can return custom data when certain conditions are met. For example, you can return custom data when the current category is “Women”, as shown in the following example. With this Rule, the “Banners” component displays a banner with the props coming from your Rule’s custom data.

Code summary

You can customize Banners in:

• The product listing page
• The Banners file
• Its props.

Usage and props

1
<Banners limit={1} />

1
2
3
4
<Banners
  // Optional parameters
  limit={number} // Limit the number of banners to display when more than one Rule with custom data is matching.
/>

External packages used

The Banners component depends on these npm packages:

• jotai: the state management library (written in TypeScript).
• classnames: a utility for conditionally joining CSS class names.
• react-instantsearch-dom: a package that provides the connector connectQueryRules that passes an item’s array that matches a Rule.