Rendering

<BannerRenderer> is the public half of the package. It reads a BannerTemplate and puts the right breakpoint tree on the page.

import { BannerRenderer } from 'react-bannerkit/renderer'
import 'react-bannerkit/renderer.css'
 
<BannerRenderer
  template={template}
  headingTag="h1"
  breakpoint="laptop"
/>

Props

Prop	Type	Notes
`template`	`BannerTemplate`	Required. The document to render. Repaired on the way in.
`headingTag`	`string`	Default `"h2"`. The HTML element for heading elements.
`breakpoint`	`BreakpointName`	Optional. Overrides the container query and forces one layout.
`className`	`string`	Merged onto the root. The `bnb-root` scope is always kept.
`style`	`CSSProperties`	Merged onto the root.

Container queries

The renderer wraps the banner in a container and measures it. Three widths are checked:

Name	Threshold
`laptop`	≥ 768px
`tablet`	480–767px
`mobile`	< 480px

When a breakpoint is narrower than 768px of container width it always receives the mobile layout, regardless of what the template provides. A forced breakpoint prop bypasses the query entirely.

Heading semantics

A banner may contain multiple headings. The renderer maps every heading element to the tag you pass in headingTag, preserving the document order. For a banner used as a page hero, "h1" is correct; for an inline promotion inside an article, "h2" or "h3" keeps the outline clean.

Click handling

Every link and button element fires a standard DOM event. The renderer does not intercept clicks — your own handlers on the container work as they always have:

<div onClick={handleClick}>
  <BannerRenderer template={template} />
</div>