快速准确的反应渲染器对概念。包括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但可以为您处理所有细节，请肯定地检查它们。
