Type Alias: BlockComponent<P>

BlockComponent<P> = (props) => ReactNode | Promise<ReactNode>

Defined in: registry.types.ts:38

The shape a block's component has: props in, markup out. Type a block with it and the render path's expectations are checked where the block is written rather than where it renders.

It may be async, because a block renders on the server and never in the browser — a block awaiting its own data is the ordinary case, and the renderer awaits what it returns either way.

The return type permits any ReactNode; the renderer does not. It clones what the block returned to stamp data-nubbin-node on it, so the root has to be exactly one HTML element. A Fragment, an array, null, a string, or a composite such as <Card> is refused at render with not-one-host-element, and no type here catches that earlier.

Type Parameters

P

P extends UnknownProps = UnknownProps

The block's own props. Pass InferProps<typeof schema> from @nubbin/core so they are derived from the block's schema rather than declared a second time beside it. Defaults to UnknownProps, which is what a component is held as once it has come out of a registry and lost its own type.

Parameters

props

P

Returns

ReactNode | Promise<ReactNode>

Example

A block typed from the schema that validates it

import type { InferProps } from "@nubbin/core";
import type { BlockComponent } from "@nubbin/react";
import { z } from "zod";

const heroSchema = z.object({ title: z.string(), tone: z.enum(["light", "dark"]) });

export const Hero: BlockComponent<InferProps<typeof heroSchema>> = ({ title, tone }) => (
  <section data-tone={tone}>
    <h1>{title}</h1>
  </section>
);