快速準確的反應渲染器對概念。包括TS電池。 ⚡️
如果您只想使用概念發佈網站，那麼我們強烈建議您使用Super.SO。
如果您想通過React進行更多控製網站的控制，那麼我們建議您查看Next.js入門套件，該套件是免費的，並在引擎蓋下使用react-notion-x 。
而且，如果您想要更多的控制權，那麼您就在正確的位置！ ？
next/dynamic懶惰地加載next/image以及LQIP預覽圖像（演示）首先，您需要獲取概念頁面的內容：
import { NotionAPI } from 'notion-client'
const notion = new NotionAPI ( )
const recordMap = await notion . getPage ( '067dd719a912471ea9a3ac10710e7fdf' )擁有一個概念頁面的數據後，您可以通過React進行渲染：
import * as React from 'react'
import { NotionRenderer } from 'react-notion-x'
export default ( { recordMap } ) => (
< NotionRenderer recordMap = { recordMap } fullPage = { true } darkMode = { false } />
)注意：對於較重的塊，您必須選擇通過NotionRenderer.components來使用它們。這些不包含在默認的NotionRenderer導出中，因為它們在許多用例中都太重了。
您還需要導入一些CSS樣式。如果您使用next.js，建議您將這些導入放在pages/_app.js頂部：
// core styles shared by all of react-notion-x (required)
import 'react-notion-x/src/styles.css'
// used for code syntax highlighting (optional)
import 'prismjs/themes/prism-tomorrow.css'
// used for rendering equations (optional)
import 'katex/dist/katex.min.css' 從react-notion-x努力盡可能輕巧的默認導入。大多數塊將很好地渲染，但是默認情況下不包含一些較大的塊，例如PDF和收集視圖（數據庫視圖）。
要使用它們，您需要從react-notion-x/build/third-party/*中導入所需的內容：
import { Code } from 'react-notion-x/build/third-party/code'
import { Collection } from 'react-notion-x/build/third-party/collection'
import { Equation } from 'react-notion-x/build/third-party/equation'
import { Modal } from 'react-notion-x/build/third-party/modal'
import { Pdf } from 'react-notion-x/build/third-party/pdf'請注意，我們強烈建議將這些組件加載到懶惰的情況下，除非您知道您的用例都需要它們。
如果您使用的是Next.js，則可以使用Next/Dynamic懶洋洋地加載它們。如果您的概念內容不使用這些重量級組件之一，則不會將其加載到您的頁面中。這樣可以使初始頁面捆綁小，您的網站感到很活潑。
import dynamic from 'next/dynamic'
const Code = dynamic ( ( ) =>
import ( 'react-notion-x/build/third-party/code' ) . then ( ( m ) => m . Code )
)
const Collection = dynamic ( ( ) =>
import ( 'react-notion-x/build/third-party/collection' ) . then (
( m ) => m . Collection
)
)
const Equation = dynamic ( ( ) =>
import ( 'react-notion-x/build/third-party/equation' ) . then ( ( m ) => m . Equation )
)
const Pdf = dynamic (
( ) => import ( 'react-notion-x/build/third-party/pdf' ) . then ( ( m ) => m . Pdf ) ,
{
ssr : false
}
)
const Modal = dynamic (
( ) => import ( 'react-notion-x/build/third-party/modal' ) . then ( ( m ) => m . Modal ) ,
{
ssr : false
}
)您需要通過將它們傳遞到NotionRenderer的components道具來啟用它們。
export default ( { recordMap } ) => (
< NotionRenderer
recordMap = { recordMap }
components = { {
Code ,
Collection ,
Equation ,
Modal ,
Pdf
} }
/>
) Code組件在引擎蓋下使用棱鏡。默認情況下，它捆綁了對JavaScript，Typescript和CSS的支持。要添加對其他語言語法的支持，請按照components/NotionPage.tsx中的示例懶惰地加載棱鏡組件在運行時加載。當使用Code組件時，您可能希望將prismjs添加到項目中，以作為依賴項，因此Typescript不會抱怨。
對於Equation支持，您需要導入Katex CSS樣式。
對於這些可選組件中的每一個，請確保您還會導入相關的第三方CSS（如上）。
如果您想訪問私人概念頁面，則可以選擇將authToken和activeUser傳遞給API。兩者都可以從您的Web瀏覽器中檢索。查看工作空間後，打開開發工具>應用程序> cookie>並複制token_v2和notion_user_id 。分別是ActiveUser：notion_user_id，authtoken：token_v2。
我們建議將這些存儲為環境變量，並將它們傳遞到NotionAPI構造函數中，如下所示：
const notion = new NotionAPI ( {
activeUser : process . env . NOTION_ACTIVE_USER ,
authToken : process . env . NOTION_TOKEN_V2
} )請注意，這與官方概念API提供的API令牌不同，因為notion-client使用非官方概念API（這是所有概念應用程序都使用的）。
這是一個最小的Next.js示例項目，其中最重要的代碼pages/[pageId].tsx和components/NotionPage.tsx 。您可以在Vercel上觀看此示例。
這是一個更完整的下一步。 JS示例項目，其中最重要的代碼pages/[pageId].tsx和components/NotionPage.tsx 。您可以在Vercel上觀看此示例。
功能齊全的演示添加了一些不錯的功能：
有關生產示例，請查看Next.js概念入門套件，該套件使用引擎蓋下的react-notion-x 。
| 包裹 | NPM | 環境 | 描述 |
|---|---|---|---|
| 反應-notion-X | 瀏覽器 + SSR | 快速反應渲染器的概念。 | |
| 概念 - 委託人 | 服務器端* | 概念API的強大打字客戶端。 | |
| 概念類型 | 普遍的 | 核心概念打字稿類型。 | |
| 概念 - 烏蒂爾 | 普遍的 | 使用概念數據的有用實用程序。 |
*由於CORS限制，不應從客戶端瀏覽器中調用Intion的API。 notion-client與node.js和deno兼容。
大多數概念塊和收集視圖得到了充分的支持。
| 塊類型 | 支持 | 塊類型枚舉 | 筆記 |
|---|---|---|---|
| 頁 | ✅是的 | page | |
| 文字 | ✅是的 | text | 支持所有已知的文本格式選項 |
| 書籤 | ✅是的 | bookmark | 外部URL的嵌入式預覽 |
| 項目符號清單 | ✅是的 | bulleted_list | <ul> |
| 編號列表 | ✅是的 | numbered_list | <ol> |
| 標題1 | ✅是的 | header | <h1> |
| 標題2 | ✅是的 | sub_header | <h2> |
| 標題3 | ✅是的 | sub_sub_header | <h3> |
| 引用 | ✅是的 | quote | |
| 大喊 | ✅是的 | callout | |
| 等式（塊） | ✅是的 | equation | KATEX通過React-Katex |
| 方程（內聯） | ✅是的 | text | KATEX通過React-Katex |
| Todos（複選框） | ✅是的 | to_do | |
| 目錄 | ✅是的 | table_of_contents | 請參閱notion-utils getPageTableOfContents helper funtion |
| 分隔線 | ✅是的 | divider | 水平線 |
| 柱子 | ✅是的 | column | |
| 列列表 | ✅是的 | column_list | |
| 切換 | ✅是的 | toggle | <details> |
| 圖像 | ✅是的 | image | <img> |
| 嵌入 | ✅是的 | embed | 通用的iframe嵌入 |
| 影片 | ✅是的 | video | iframe |
| 無花果 | ✅是的 | figma | iframe |
| Google地圖 | ✅是的 | maps | iframe |
| Google Drive | ✅是的 | drive | Google文檔，床單等自定義嵌入 |
| 鳴叫 | ✅是的 | tweet | 使用Twitter嵌入SDK |
| ✅是的 | pdf | 使用S3簽名的URL和React-PDF | |
| 聲音的 | ✅是的 | audio | 使用S3簽名的URL和HTML5 audio元素 |
| 文件 | ✅是的 | file | 使用S3簽名的URL（通用下載文件） |
| 關聯 | ✅是的 | text | 外部鏈接 |
| 頁面鏈接 | ✅是的 | page | 鏈接到同一工作空間中的概念頁面 |
| 外部頁面鏈接 | ✅是的 | text | 鏈接到另一個工作區中的概念頁面或收集視圖 |
| 代碼（塊） | ✅是的 | code | 塊代碼語法通過prismjs突出顯示 |
| 代碼（內聯） | ✅是的 | text | 內聯代碼格式（無語法突出顯示） |
| 收藏 | ✅是的 | 也稱為數據庫 | |
| 收集視圖 | ✅是的 | collection_view | 收藏有1：n映射到收集視圖 |
| 收集查看表 | ✅是的 | collection_view | type = "table" （默認表視圖） |
| 收集查看畫廊 | ✅是的 | collection_view | type = "gallery" （網格視圖） |
| 收集視圖板 | ✅是的 | collection_view | type = "board" （看板視圖） |
| 收集視圖列表 | ✅是的 | collection_view | type = "list" （垂直列表視圖） |
| 收集查看日曆 | 丟失的 | collection_view | type = "calendar" （嵌入式日曆視圖） |
| 收集查看頁面 | ✅是的 | collection_view_page | 收集視圖作為獨立頁面 |
如果您發現任何問題或丟失的塊，請告訴我們。
所有已知的塊和大多數已知的配置設置都可以在我們的測試套件中找到。
Google Lighthouse為``React-notion-X''R上呈現的示例頁面分數。
開箱即用， react-notion-x非常快速且相對輕巧，但是有一些關鍵因素需要注意。
Bundlephobia報告了主react-notion-x束的〜28KB GZIP捆綁包大小。這不包括可選的third-party組件，我們建議僅在頁面需要時通過Next/Dynamic進行懶惰加載。
Perf的另一個主要因素來自概念託管的圖像。它們通常不優化，尺寸不正確，並且不可填充，因為概念必須處理用戶可以隨時更改的細粒度訪問控制。您可以在NotionRenderer上覆蓋默認的mapImageUrl函數，以通過Cloudflare工人（例如CloudFlare工人）添加緩存，這是Intion X對最佳頁面負載速度的作用。
NotionRenderer還支持可選的低質量圖像佔位符預覽的懶惰圖像加載。您可以在此頁面上在實踐中看到此演示，該頁面正在使用LQIP-Modern來預先生成佔位符圖像，這些圖像靈感來自Medium.com的圖像加載。
如果您使用next.js，我們建議通過next/image或next/legacy/image以及next/link到渲染器，如下所示：
import Image from 'next/image' // or import Image from 'next/legacy/image' if you use legacy Image
import Link from 'next/link'
export default ( { recordMap } ) => (
< NotionRenderer
recordMap = { recordMap }
components = { {
nextImage : Image , // or nextLegacyImage: LegacyImage,
nextLink : Link
} }
/>
)這將這些Next.js組件包裝在兼容性層中，因此NotionRenderer可以使用它們與非next.js等價<img>和<a>相同。
請注意，當前僅通過預覽圖像或通過打開NotionRenderer的forceCustomImages來啟用自定義圖像組件。
react-notion-xreact-notion-x最初是作為react-notion的叉子，可以更好地支持不同類型的概念內容（尤其是集合），並成長為更全面的東西react-notion不再積極維護notion-types和notion-client是對notion-api-worker的重寫react-notion-x的主要用例之一是通過Next.js進行服務器端渲染，在這種情況下，CF Worker是不必要的請參閱《貢獻指南》，並加入我們驚人的貢獻者名單！
麻省理工學院©Travis Fischer
該項目擴展了Timo Lins，Tobias Lins，Sam Wight和其他貢獻者的MIT許可工作。
通過在Twitter上關注我來支持我的OSS工作
Super.O友善地贊助了這個項目。如果您正在尋找一種託管解決方案，該解決方案採用非常相似的方法來進行react-notion-x但可以為您處理所有細節，請肯定地檢查它們。
