React Notion X

Fast and accurate React renderer for Notion.

Features

• Render pages from @texonom/nclient or @texonom/ncompat record maps
• Built-in search dialog and Table of Contents
• Lightweight components with sensible defaults

Use the renderer as a drop-in component or import pieces for your own UI.

Usage

import { NotionRenderer } from '@texonom/nreact'
;<NotionRenderer recordMap={recordMap} fullPage />

// customize links and image urls
<NotionRenderer
  recordMap={recordMap}
  fullPage
  mapPageUrl={id => `/docs/${id}`}
  mapImageUrl={url => `/api/image/${encodeURIComponent(url)}`}
  components={{
    nextLink: ({ href, children }) => <a href={href}>{children}</a>
  }}
/>

// use a single component
import { Text } from '@texonom/nreact'

function Title({ value }) {
  return <Text value={value} />
}

API

Exports:

• NotionRenderer
• block components like Text, Header, PageIcon, PageAside and more
• helper hooks and context

Difference from the original

This fork keeps the renderer from React Notion X but integrates extra features such as backlink rendering and improved property display.

Source code

• block.tsx – block type switch
• text.tsx – decoration switch