Banner

Overview

In e-commerce, a banner is a graphical advertisement that is typically displayed on a web page or email. Banners are often used to promote a product or service, or to direct visitors to a specific landing page. They can come in a variety of sizes and formats, such as static images, animated gifs, or video. Banners are often used as part of online advertising campaigns to generate more traffic to a website and to increase conversions and sales.

Usage

// importing component
import { Banner } from "@unbxd-ui/react-search-components";
 
// import the style for the component
import "@unbxd-ui/react-search-components/styles/banner.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/banner.css")

Live Demo

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { Banner } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<Banner />
	...
</UnbxdSearchWrapper>

Props

• Determines if content must open in new tab on clicking the banner.
• Default Value: true.

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
	wrapper: "banner-wrapper", // used for the banner wrapper when banner is in HTML format
	image: "banner-image" // used for the banner image when banner is an image
}}

Related Hook

To use the Unbxd React Search SDK without the pre-built Banner component, add the functionality to your custom component using the useBanner hook. Refer to the documentation for more details.