Banner

Basic Setup & Configuration

1. How do I import and use the Banner component?

You can import the Banner component from @unbxd-ui/react-search-components:

import { UnbxdSearchCSRWrapper } from "@unbxd-ui/react-search-components";
import { Banner } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchCSRWrapper>
  <Banner />
</UnbxdSearchCSRWrapper>

2. What types of banners does the component support?

The Banner component supports two types of banners:

1. HTML Banner - Custom HTML content rendered directly in the banner area
2. Image Banner - Image-based banners with optional clickable links to landing pages

The component automatically detects the banner type and renders the appropriate format based on the data received.

3. Can I control whether banner links open in a new tab?

Yes, use the openNewTab prop to control link behavior for image banners:

// Open banner links in new tab
<Banner openNewTab={true} />
 
// Open banner links in same tab (default)
<Banner openNewTab={false}/>
 

Banner Behavior

1. When does the Banner component appear or hide?

The Banner component automatically hides when there are no banners available (banners.length === 0). It only appears when banner data is returned from the search API, preventing empty banner sections in the UI.

This only affects image banners with landingUrl - HTML banners handle their own link behavior through the HTML content.

2. How does the Banner component decide which banner to display?

The Banner component displays the first banner from the banners array returned by the useBanner hook. It checks if bannerHtml exists first - if present, it renders an HTML banner; otherwise, it renders an image banner using imageUrl and landingUrl.

3. What happens when multiple banners are available?

Currently, the Banner component only displays the first banner from the banners array (banners[0]). If multiple banners are returned from the API, only the first one will be rendered. To display multiple banners, you would need to implement custom logic or use multiple Banner components.

Styling Customization

1. Does the React Search SDK provide default CSS for the Banner component?

Yes, the React Search SDK provides built-in CSS styles for the Banner component. To use the default styles, import the CSS file in your application:

import "@unbxd-ui/react-search-components/dist/styles/banner.css";

This provides basic styling for both HTML and image banners. You can override these styles with your own CSS or use the styles prop to apply custom classes.

2. Can I customize the appearance of the Banner component?

Yes, use the styles prop to override CSS classes. Click here to see how to use it.