@corpusctl/react

React renderer for Corpusctl block content. A thin adapter over the framework-agnostic render tree from @corpusctl/client — the tree does the hard work (list nesting, mark nesting, heading anchors), this package only draws it.

• Zero default styling — not a single class in the default output. Every block type is overridable.
• Unknown block types never crash the page; without a types/fallback match they are skipped gracefully.
• No JSX compiler required (written with createElement).

Install

pnpm add @corpusctl/react

Peer dependency: react >= 18.

Usage

import { Content } from '@corpusctl/react'

// Default: unstyled <p>, <h1..6>, <ul>/<ol>, <blockquote>
<Content value={doc.fields.body} />

// Overrides — className decisions are yours:
<Content
  value={doc.fields.body}
  headingAnchors
  components={{
    paragraph: (n, render) => <p className="prose">{render(n.children)}</p>,
    marks: {
      link: (n, render) => (
        <a className="underline" href={String(n.data?.href ?? '')}>{render(n.children)}</a>
      ),
    },
    types: {
      gallery: (n) => <Gallery images={n.value.images} />,
    },
    fallback: (n) => <UnknownBlock type={n.type} />, // omit to skip unknown blocks
  }}
/>

If you build the tree yourself, renderNodes(nodes, components, { headingAnchors }) is also exported.

The Vue adapter (@corpusctl/vue) consumes the same tree and produces the same default output — switching frameworks does not change the rendering (pinned by tests).

License

MIT