Overview

The HeadlessBanner component is a flexible banner that allows you to control its visibility and removal from the DOM using different rendering strategies. It provides options to either unmount the component or hide it while keeping it in the DOM.

Installation

To use the HeadlessBanner component, install it in your project:

npm install @locoworks/reusejs-react-banner
or 
yarn add @locoworks/reusejs-react-banner

Importing

Import the HeadlessBanner component and necessary enums:

import {HeadlessBanner, RenderingStrategyEnum, DisplayEnum } from "@locoworks/reusejs-react-banner";

Types/ Exported Components

The following types and exported components are available from the @locoworks/reusejs-react-banner package:

  • HeadlessBanner: The main component to create a headless banner.
  • RenderingStrategyEnum: An enum that defines the available rendering strategies.
  • DisplayEnum: An enum that defines the available display values for styling.

Props

  • showBanner (optional, default: true): Determines whether the banner should be initially shown or hidden.
  • renderingStrategy (optional, default: RenderingStrategyEnum.UNMOUNT): Specifies how the component will be removed from the DOM on hiding the banner.
  • children : A function that returns the JSX content of the banner. Receives an object with properties for interacting with the banner.
  • outsideStateControl (optional, default: true): Controls whether the component's internal state should be controlled externally.
  • wrapperDisplay (optional, default: DisplayEnum.FLEX): Specifies the CSS display property value for the banner's wrapper element.

Usage/Examples

Code Fragment

<HeadlessBanner
  showBanner={true}
  renderingStrategy={RenderingStrategyEnum.HIDDEN}
  outsideStateControl={false}
  wrapperDisplay={DisplayEnum.BLOCK}
>
  {(props) => (
    <div ref={props.eleRef}>
      {props.isHidden ? <p>Banner is hidden.</p> : <p>Banner is visible.</p>}
      <button onClick={props.hideBanner}>Toggle Banner</button>
    </div>
  )}
</HeadlessBanner>

Multi-Banner Sample

In the following example we have two separete banners, while the first banner is displayed on screen and maintains its state internally, the second banner is can be controlled from outside by using prop showBanner.

import React from "react";
import {
	HeadlessBanner,
	RenderingStrategyEnum,
} from "@locoworks/reusejs-react-banner";

const Example = () => {
	const [showSecondBanner, setShowSecondBanner] = React.useState(false);

	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50 gap-y-4">
			<button
				className="bg-blue-500 px-4 py-2 rounded-xl text-white font-semibold"
				onClick={() => {
					setShowSecondBanner(!showSecondBanner);
				}}
			>
				Toggle Second Banner!!
			</button>
			<HeadlessBanner renderingStrategy={RenderingStrategyEnum.HIDDEN}>
				{({ hideBanner, eleRef }) => {
					return (
						<div
							ref={eleRef as any}
							className="relative w-11/12 px-10 py-6 flex justify-center items-center bg-yellow-200 border-2 border-yellow-500 rounded-lg"
						>
							<label>This is a simple Warning Banner!!</label>
							<button
								className="absolute top-1 right-2 cursor-pointer text-yellow-900 hover:underline"
								onClick={() => {
									setShowSecondBanner(true);
									hideBanner();
								}}
							>
								Close
							</button>
						</div>
					);
				}}
			</HeadlessBanner>
			<HeadlessBanner
				renderingStrategy={RenderingStrategyEnum.HIDDEN}
				showBanner={showSecondBanner}
			>
				{({ hideBanner, eleRef }) => {
					return (
						<div
							ref={eleRef as any}
							className="relative w-11/12 px-10 py-6 flex justify-center items-center bg-green-200 border-2 border-green-500 rounded-lg"
						>
							<label>Warning Banner closed!!</label>
							<button
								className="absolute top-1 right-2 cursor-pointer text-green-800 hover:underline"
								onClick={() => {
									setShowSecondBanner(false);
									hideBanner();
								}}
							>
								Close
							</button>
						</div>
					);
				}}
			</HeadlessBanner>
		</div>
	);
};

export default Example;

Warning Banner Sample

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

import React from "react";
import {
	HeadlessBanner,
	RenderingStrategyEnum,
} from "@locoworks/reusejs-react-banner";
import ExclamationIcon from "../icons/ExclamationIcon";

const Example = () => {
	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50 gap-y-4">
			<HeadlessBanner renderingStrategy={RenderingStrategyEnum.HIDDEN}>
				{({ hideBanner, eleRef }) => {
					return (
						<div
							ref={eleRef as any}
							className="relative w-11/12 px-10 py-6 flex justify-center gap-x-6 items-center bg-yellow-200 border-2 border-yellow-500 rounded-lg text-yellow-700"
						>
							<ExclamationIcon />
							<label>This is a simple Warning Banner!!</label>
							<button
								className="absolute top-1 right-2 cursor-pointer text-yellow-900 hover:underline"
								onClick={() => {
									hideBanner();
								}}
							>
								Close
							</button>
						</div>
					);
				}}
			</HeadlessBanner>
			<div className="px-10">
				<h2 className="my-1">{`What is Lorem Ipsum?`}</h2>
				<p>{`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`}</p>
			</div>
		</div>
	);
};

export default Example;

Styling

Styling the HeadlessBanner component can be done using Tailwind CSS or custom CSS. The component itself does not include any specific styling.

Best Practices

  • Use the showBanner and renderingStrategy props to control the initial visibility and removal behavior of the banner.
  • Utilize the children function to customize the content and behavior of the banner.
  • Experiment with different wrapperDisplay values to achieve the desired layout and positioning.