useBanner

Overview

The useBanner hook is designed to manage and retrieve banner advertisements for an e-commerce platform based on the current search query. These banners, which can be images or HTML content, are configured through the Unbxd console and displayed to the user alongside search results or other relevant sections of the site.

Usage

import { useBanner } from "@unbxd-ui/react-search-hooks";

Code Example

import { useBanner } from "@unbxd-ui/react-search-hooks";
 
const BannerComponent = () => {
    const { banners, onBannerClick } = useBanner();
 
    return (
        <div className="banners-container">
            {banners.map((banner, index) => (
                <div key={index} className="banner-item" onClick={onBannerClick}>
                    {banner.imageUrl && (
                        <a href={banner.landingUrl} target="_blank" rel="noopener noreferrer">
                            <img src={banner.imageUrl} alt="Banner" />
                        </a>
                    )}
                    {banner.bannerHtml && (
                        <div dangerouslySetInnerHTML={{ __html: banner.bannerHtml }} />
                    )}
                </div>
            ))}
        </div>
    );
};

Hook API

Return Values

• An array of banners retrieved based on the current search query. Each banner can be an image or HTML content.
• Each banner in the banners array has the following structure:
  • imageUrl - The URL of the banner image. If the banner is an image, this field will contain the image URL. Otherwise, it will be null.
  • landingUrl - The URL to which the user is redirected when the banner is clicked. This is optional and will be null if not provided.
  • bannerHtml - The HTML content of the banner. If the banner is HTML-based, this field will contain the HTML string. Otherwise, it will be null.

• A function that can be called when a banner has been clicked. It in turn calls the onEvent function wherein the type is "BANNER_CLICKED".

Use Cases

Banner