概念のための高速で正確なReactレンダラー。 TSバッテリーが含まれています。 ⚡⚡️
概念を使用してWebサイトを公開したい場合は、super.soを使用することを強くお勧めします。
React react-notion-x介してWebサイトをさらに制御したい場合は、付随するNext.JSスターターキットをチェックすることをお勧めします。
さらにコントロールしたい場合は、適切な場所にいます！ ??
next/dynamicを介して怠lazにロードできますnext/imageをサポートします最初に、概念ページのコンテンツを取得する必要があります。
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'ユースケースのために前もって必要とすることがわかっていない限り、これらのコンポーネントを怠zyなロードすることを強くお勧めします。
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のサポートがバンドルされています。追加の言語構文のサポートを追加するには、実行時にPrismコンポーネントをゆっくりとロードするcomponents/NotionPage.tsxの例に従ってください。 Code Componentを使用する場合、依存関係としてプロジェクトにprismjsを追加することをお勧めします。
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
} )これはnotion-client非公式の概念APIを使用しているため、公式の概念APIによって提供されるAPIトークンと同じではないことに注意してください（これはすべての概念アプリが使用するものです）。
pages/[pageId].tsxおよびcomponents/NotionPage.tsxで最も重要なコードを備えた最小限のnext.jsの例プロジェクトを示します。この例はvercelでライブで表示できます。
pages/[pageId].tsxおよびcomponents/NotionPage.tsxで最も重要なコードを備えた、よりフル機能のnext.jsの例プロジェクトを示します。この例はvercelでライブで表示できます。
フル機能のデモは、いくつかの素晴らしい機能を追加します：
制作の例については、next.jsのreact-notion-xスターターキットをチェックしてください。
| パッケージ | npm | 環境 | 説明 |
|---|---|---|---|
| React-Notion-X | ブラウザ + SSR | 概念のための高速反応レンダラー。 | |
| 概念クライアント | サーバー側* | 概念API用の堅牢なタイプスクリプトクライアント。 | |
| 概念タイプ | ユニバーサル | コア概念タイプスクリプトタイプ。 | |
| 概念 - | ユニバーサル | 概念データを操作するための便利なユーティリティ。 |
* CORSの制限のため、概念の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 | React-Katexを介してKatex |
| 方程式（インライン） | ✅はい | text | React-Katexを介してKatex |
| Todos（チェックボックス） | ✅はい | to_do | |
| 目次 | ✅はい | table_of_contents | notion-utilsをgetPageTableOfContentsしてください |
| 仕切り | ✅はい | divider | 水平線 |
| カラム | ✅はい | column | |
| 列リスト | ✅はい | column_list | |
| トグル | ✅はい | toggle | <details> |
| 画像 | ✅はい | image | <img> |
| 埋め込み | ✅はい | embed | 一般的なiframe埋め込み |
| ビデオ | ✅はい | video | iframe |
| Figma | ✅はい | figma | iframe |
| Googleマップ | ✅はい | maps | iframe |
| Googleドライブ | ✅はい | drive | Googleドキュメント、シートなど、カスタム埋め込み |
| ツイート | ✅はい | tweet | SDKを埋め込むTwitterを使用します |
| ✅はい | 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は、Vercelの「React Notion-X`によってレンダリングされた例のページのスコアを記録します。
箱から出して、 react-notion-xは非常に高速で比較的軽量ですが、注意すべき重要な要素がいくつかあります。
Bundlephobiaは、メインreact-notion-xバンドルの〜28kb GZIPバンドルサイズを報告しています。これには、ページが必要な場合にのみ、次/ダイナミックを介して怠zyなロードをお勧めするオプションのthird-partyコンポーネントは含まれていません。
PERFのもう1つの主要な要因は、概念によってホストされた画像から来ています。一般的に、最適化されておらず、不適切なサイズであり、キャッシュできません。なぜなら、概念は、ユーザーがいつでも変更できる細粒アクセス制御に対処する必要があるためです。 NotionRendererのデフォルトのmapImageUrl関数をオーバーライドして、CloudFlareワーカーのようなCDNを介してキャッシュを追加できます。
NotionRenderer 、オプションの低品質の画像プレースタープレビューを使用した怠zyな画像の読み込みもサポートしています。このページでは、このページでは、LQIP-Modernを使用して、Medium.comの画像の読み込みに触発されたプレースホルダー画像を事前に保有するデモを見ることができます。
next.jsを使用している場合は、 next/imageまたはnext/link next/legacy/imageを渡すことをお勧めします。
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-xを使用しますreact-notion-xさまざまなタイプの概念コンテンツ（特にコレクション）をよりよくサポートして、 react-notionのフォークとして始まり、より包括的なものに成長しましたreact-notion積極的に維持されなくなりましたnotion-typesとnotion-client notion-api-workerの書き直しですreact-notion-xの主なユースケースの1つは、next.jsを介したサーバー側のレンダリングです。この場合、CFワーカーは不要です貢献ガイドを見て、貢献者の素晴らしいリストに参加してください！
MIT©Travis Fischer
このプロジェクトは、Timo Lins、Tobias Lins、Sam Wight、およびその他の貢献者によるMITライセンスの研究を拡張します。
Twitterで私をフォローして、私のOSSの仕事をサポートしてください
Super.Soは、このプロジェクトを後援するのに十分親切でした。 react-notion-xと非常によく似たアプローチをとるが、すべての詳細を処理するホストソリューションを探している場合は、間違いなくチェックしてください。
