@bannerstudio/react

React component for embedding a Banner Studio banner (CLS-safe iframe).

npm i @bannerstudio/react

import { BannerStudioEmbed } from '@bannerstudio/react'

export function Header() {
  return (
    <BannerStudioEmbed
      apiBase="https://api.bannerstud.io"
      affiliate="acme"
      type="top"
      height={90}
    />
  )
}

Props

| Prop | Type | Default | Notes | |---|---|---|---| | apiBase | string | — | Banner Studio API base (required). | | affiliate | string | — | Affiliate code (required). | | type | 'top' \| 'bottom' \| 'inline' | 'top' | | | placement | string | — | Optional placement code. | | height | number | 90 | Reserved height (px) — prevents CLS. Set to the banner's canvas height. |

Reserves height up front (no layout shift), then resizes on the banner's banner-height message, collapses on banner-empty, and hides on banner-close.

Peer dependency: react@>=17.