react-bannerkit

    Your first banner

    A banner is a JSON document. The renderer reads it and puts elements on the page — no JSX required at the authoring site.

    Minimal template

    {
  "id": "my-banner",
  "name": "My first banner",
  "description": "A simple two-line hero.",
  "breakpoints": {
    "laptop": {
      "root": {
        "kind": "panel",
        "type": "single",
        "bg": "#111",
        "pad": 40,
        "elements": [
          {
            "type": "heading",
            "text": "Hello world",
            "fs": 48,
            "color": "#fff"
          },
          {
            "type": "text",
            "text": "This is my first banner.",
            "fs": 18,
            "color": "#aaa",
            "mt": 12
          }
        ]
      }
    }
  }
}

    Render it

    import { BannerRenderer } from 'react-bannerkit/renderer'
import 'react-bannerkit/renderer.css'
import template from './my-banner.json'
 
export default function Hero() {
  return <BannerRenderer template={template} headingTag="h1" />
}

    The renderer picks a breakpoint tree from a container query against its own box. Make the container narrower and it hands the banner the tablet or mobile layout automatically.

    What normalizeTemplate does

    The renderer calls normalizeTemplate internally: missing fields get defaults, typos are repaired silently, and every element receives a generated id. You can call it yourself when loading a document from a database:

    import { normalizeTemplate } from 'react-bannerkit'
 
const safe = normalizeTemplate(stored)

    See Normalising for the full repair list.