Customizing blocks

Replace the component for any block type.

Pass components to replace the built-in component for any block type:

TypeScript

import { NotionRenderer, RichText, type BlockProps } from "notionic"
function Callout({ block, context, children }: BlockProps<"callout">) {  return (    <aside className="rounded-lg border p-4">      <RichText text={block.callout.rich_text} context={context} />      {children}    </aside>  )}
<NotionRenderer blocks={blocks} components={{ callout: Callout }} />

What a component gets

block: the block, typed for its type, so block.callout is typed.
children: the block's nested blocks, already rendered, or undefined.
context: pass it to RichText and other helpers, so links and headings resolve the same way everywhere.

Equations inside text

Equations inside text have their own key, inline_equation, whose component gets the LaTeX as expression:

TypeScript

<NotionRenderer  blocks={blocks}  components={{ inline_equation: ({ expression }) => <code>{expression}</code> }}/>

Reusing the defaults

defaultComponents holds the built-in components, to wrap or fall back to:

TypeScript

import { defaultComponents } from "notionic"
const Code = defaultComponents.code!