SeokminHong/notion.tsx

(WIP) Use Notion API with JSX

Notion.tsx

How to use

npm install notion.tsx @notionhq/client

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "notion.tsx",
  },
}

Example

Code

import { Client } from '@notionhq/client';
import { notionTsx, Page } from 'notion.tsx';

const client = new Client({
  auth: process.env.NOTION_API_KEY,
});

await notionTsx(client).createPage(
  <Page parentDatabaseId={databaseId}>
    <property type="title" name="Name">
      text page!
    </property>
    <p
      slot={
        /** Child block */
        <code language="javascript">
          <text bold>console</text>
          .log(a)
        </code>
      }
    >
      {/** Block content */}
      Test <text italic>content</text>
    </p>
    123
    <p>New paragraph</p>
  </Page>,
);

Result

Supported Syntaxes

Block elements

• p: Paragraph block
• code: Code block
• embed
• bookmark
• img
• video
• pdf
• file
• audio
• math
• hr
• breadcrumb
• toc
• a
• table
• tr
• column
• h1
• h2
• h3
• ul
• ol
• todo
• li
• q
• summary
• template
• callout
• sync

Rich text elements

• text: string children are also fell back to text element
• a
• user
• time
• page
• database
• template-mention: ?
• math