noble-banner-react
v1.1.0
Published
Noble Banner React embeds the Noble experience directly in your application.
Readme
Noble Banner React
Noble Banner React embeds the Noble experience directly in your application.
Before using this component, please sign up for Noble.
Table of Contents
Installation
Install the package via npm or yarn:
npm install noble-banner-react
or
yarn install noble-banner-reactUsage
Import and use the NobleBanner component in your React application. Next.js users - please note that this is a client component and as such, should not be directly imported into a server component. Below are some usage examples:
Basic Usage
import React from 'react';
import NobleBanner from 'noble-banner-react';
function App() {
return (
<div>
<NobleBanner tenantId="your-tenant-id" productDomain="example.com" />
{/* Other components */}
</div>
);
}
export default App;Next.js App with sticky banner added at RootLayout
"use client"
import NobleBanner from "noble-banner-react";
export default function NavBar() {
return (
<>
<NobleBanner
tenantId="your-tenant-id"
productDomain="example.com"
bannerStyle={{ position: 'sticky', top: '0px' }} />
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</>
)
}export default function RootLayout({
children,
}) {
return (
<html lang="en">
<body>
<NavBar/>
{children}
</body>
</html>
);
}Props Reference
| Prop | Type | Default | Description |
|----------------------------|--------------------------------------------------------------------------|---------|----------------------------------------------------------------------------------------------------------------------------------------------|
| tenantId | string | — | Required. Your unique tenant identifier. |
| productDomain | string | undefined | The product domain associated with the banner content. Only applicable for review sites. |
| useProductionEnvironment | boolean | true | Determines the environment to use. Set to true for production or false for staging. Be sure to use the tenant-id associated with the correct environment.|
| bannerStyle | Omit<React.CSSProperties, 'width' \| 'height' \| 'display' \| 'zIndex'> | {} | Custom CSS styles for the banner wrapper. Note: You can customize styles except for width, height, display, and zIndex, which are fixed. |
| visible | boolean | true | Controls the banner's visibility. When set to false, the banner is hidden (applies display: none). |
How It Works
This component dynamically loads the appropriate Noble banner via an iframe based on the provided tenantId and productDomain. While the content is being fetched, a loading skeleton is displayed to minimize Cumulative Layout Shift, ensuring a smooth and visually consistent user experience.
Cross-Origin Message Handling
On mount, the component initializes a message handler to manage communication between the banner and your application. This is purely to control the size of the banner based on user interaction. When the component ummounts, a clean up function removes the message handler.
Style Merging
The component enforces default layout styles—specifically fixed width, height, display, and z-index—which can be merged with any custom styles provided via the bannerStyle prop. These customizations are limited to layout properties only; for example, adjusting banner colors is not supported.To manage color settings, please log in to your Noble account.