Schneller und genauer React -Renderer für den Begriff. TS -Batterien enthalten. ⚡️
Wenn Sie nur eine Website mit dem Begriff veröffentlichen möchten, empfehlen wir dringend, Super.so zu verwenden - eine gehostete Lösung mit großer Perf, die alle Details für Sie kümmert.
Wenn Sie über React mehr Kontrolle über Ihre Website wünschen, empfehlen wir, das beigefügte Next.js-Starter-Kit zu überprüfen, das kostenlos ist und react-notion-x unter der Haube verwendet.
Und wenn Sie noch mehr Kontrolle wünschen, sind Sie am richtigen Ort! ?
next/dynamic geladen werdennext/image zusammen mit LQIP -Vorschau -Bildern (Demo)Zuerst möchten Sie den Inhalt für eine Begriffsseite abrufen:
import { NotionAPI } from 'notion-client'
const notion = new NotionAPI ( )
const recordMap = await notion . getPage ( '067dd719a912471ea9a3ac10710e7fdf' )Sobald Sie die Daten für eine Begriffsseite haben, können Sie sie über React rendern:
import * as React from 'react'
import { NotionRenderer } from 'react-notion-x'
export default ( { recordMap } ) => (
< NotionRenderer recordMap = { recordMap } fullPage = { true } darkMode = { false } />
) HINWEIS: Für schwerere Blöcke müssen Sie sich dafür entscheiden, sie über NotionRenderer.components zu verwenden. Diese sind nicht in den Standard -Export von The Default NotionRenderer enthalten, da sie für viele Anwendungsfälle zu schwer sind.
Sie müssen auch einige CSS -Stile importieren. Wenn Sie Next.js verwenden, empfehlen wir Ihnen, diese Importe ganz oben auf 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' Die Standardimporte von react-notion-x bemühen sich, so leicht wie möglich zu sein. Die meisten Blöcke werden einwandfrei abgeben, aber einige größere Blöcke wie PDFs und Sammlungsansichten (Datenbankansichten) sind standardmäßig nicht enthalten.
Um sie zu verwenden, müssen Sie die von 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'Beachten Sie, dass wir diese Komponenten faul laden, es sei denn, Sie wissen, dass Sie sie für Ihren Anwendungsfall im Voraus benötigen.
Wenn Sie Next.js verwenden, können Sie als nächstes/dynamisch sie faul laden. Wenn Ihr Begriffinhalt keine dieser Schwergewichtskomponenten verwendet, wird er nicht in Ihre Seite geladen. Dies hält das erste Seitenpaket klein und Ihre Website fühlt sich bissig an.
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
}
) Sie müssen sie aktivieren, indem Sie sie an die components -Requisition des NotionRenderer weitergeben.
export default ( { recordMap } ) => (
< NotionRenderer
recordMap = { recordMap }
components = { {
Code ,
Collection ,
Equation ,
Modal ,
Pdf
} }
/>
) Die Code verwendet Prisma unter der Motorhaube. Es wird standardmäßig mit Unterstützung von JavaScript, TypeScript und CSS gebündelt. Um Unterstützung für zusätzliche Sprachsyntaxen hinzuzufügen, befolgen Sie das Beispiel in components/NotionPage.tsx die die Prismenkomponenten zur Laufzeit träge lädt. Bei Verwendung der Code möchten Sie wahrscheinlich prismjs zu Ihrem Projekt als Abhängigkeit hinzufügen, sodass sich TypeScript nicht beschwert.
Für Equation müssen Sie die Katex -CSS -Stile importieren.
Stellen Sie für jede dieser optionalen Komponenten sicher, dass Sie bei Bedarf auch die entsprechenden CSS von Drittanbietern importieren (oben).
Sie können optional einen authToken und activeUser an die API weitergeben, wenn Sie auf private Vorstellungsseiten zugreifen möchten. Beide können aus Ihrem Webbrowser abgerufen werden. Sobald Sie Ihren Arbeitstahl anzeigen, öffnen Sie Ihre Entwicklungstools> Anwendung> Cookie> und kopieren Sie den token_v2 und notion_user_id . ActiveUser: pointion_user_id, authToken: token_v2.
Wir empfehlen, diese als Umgebungsvariablen zu speichern und sie wie folgt an den NotionAPI -Konstruktor zu übergeben:
const notion = new NotionAPI ( {
activeUser : process . env . NOTION_ACTIVE_USER ,
authToken : process . env . NOTION_TOKEN_V2
} ) Beachten Sie, dass dies nicht dasselbe ist wie das API-Token, das von der offiziellen API-API zur Verfügung gestellt wird, da notion-client die inoffizielle API-API (die alle Begriffs-Apps verwenden) verwendet.
Hier components/NotionPage.tsx ein minimales Beispiel für das nächste Mal pages/[pageId].tsx Sie können dieses Beispiel live auf Vercel anzeigen.
Hier finden Sie ein Beispiel für ein Beispiel für das Beispiel pages/[pageId].tsx components/NotionPage.tsx . Sie können dieses Beispiel live auf Vercel anzeigen.
Die Demo mit voller Funktion fügt ein paar nette Funktionen hinzu:
Für ein Produktionsbeispiel schauen Sie sich das Next.js-Vorstartkit an, das react-notion-x unter der Motorhaube verwendet.
| Paket | NPM | Umfeld | Beschreibung |
|---|---|---|---|
| React-Notion-X | Browser + SSR | Schneller Reaktionsrenderer für den Begriff. | |
| Begriffe-Klient | Serverseite* | Robuster Typenschriftenclient für die API der Begriff. | |
| Begriffstyp | Universal | Kern -Begriffs -Typskriptypen. | |
| Begriffe | Universal | Nützliche Dienstprogramme für die Arbeit mit Begriffsdaten. |
* Die API des Begriffs sollte aufgrund von CORS-Beschränkungen nicht von clientseitigen Browsern aufgerufen werden. notion-client ist mit Node.js und Deno kompatibel.
Der Großteil der Begriffsblöcke und Sammlungsansichten wird vollständig unterstützt.
| Blocktyp | Unterstützt | Blocktyp Enum | Notizen |
|---|---|---|---|
| Seite | ✅ Ja | page | |
| Text | ✅ Ja | text | Unterstützt alle bekannten Optionen für die Textformatierung |
| Lesezeichen | ✅ Ja | bookmark | Eingebettete Vorschau der externen URL |
| Kugelliste | ✅ Ja | bulleted_list | <ul> |
| Nummerierte Liste | ✅ Ja | numbered_list | <ol> |
| Überschrift 1 | ✅ Ja | header | <h1> |
| Überschrift 2 | ✅ Ja | sub_header | <h2> |
| Überschrift 3 | ✅ Ja | sub_sub_header | <h3> |
| Zitat | ✅ Ja | quote | |
| Aufbieten, ausrufen, zurufen | ✅ Ja | callout | |
| Gleichung (Block) | ✅ Ja | equation | Katex über React-Katex |
| Gleichung (Inline) | ✅ Ja | text | Katex über React-Katex |
| Todos (Kontrollkästchen) | ✅ Ja | to_do | |
| Inhaltsverzeichnis | ✅ Ja | table_of_contents | Siehe notion-utils getPageTableOfContents Helper-Funktionen |
| Teiler | ✅ Ja | divider | Horizontale Linie |
| Spalte | ✅ Ja | column | |
| Spaltenliste | ✅ Ja | column_list | |
| Umschalten | ✅ Ja | toggle | <details> |
| Bild | ✅ Ja | image | <img> |
| Einbetten | ✅ Ja | embed | Generische iframe -Einbettungen |
| Video | ✅ Ja | video | iframe |
| Figma | ✅ Ja | figma | iframe |
| Google Maps | ✅ Ja | maps | iframe |
| Google Drive | ✅ Ja | drive | Google Docs, Blätter usw. Benutzerdefinierte Einbettung |
| Tweet | ✅ Ja | tweet | Verwendet das Twitter -Einbettungs -SDK |
| ✅ Ja | pdf | Verwendet S3 Signierte URLs und React-PDF | |
| Audio | ✅ Ja | audio | Verwendet S3 Signierte URLs und HTML5 audio |
| Datei | ✅ Ja | file | Verwendet S3 Signierte URLs (Generikum herunterladbare Datei) |
| Link | ✅ Ja | text | Externe Links |
| Seitenlink | ✅ Ja | page | Link zu einer Begriffsseite im selben Arbeitsbereich |
| Externer Seitenlink | ✅ Ja | text | Links zu einer Begriffsseite oder einer Sammlungsansicht in einem anderen Arbeitsbereich |
| Code (Block) | ✅ Ja | code | Blockcode -Syntax -Hervorhebung über Prismjs |
| Code (Inline) | ✅ Ja | text | Inline -Code -Formatierung (keine Syntax -Hervorhebung) |
| Sammlungen | ✅ Ja | Auch als Datenbanken bekannt | |
| Sammlungsansicht | ✅ Ja | collection_view | Sammlungen haben eine 1: n -Mapping zu Sammlungsansichten |
| Sammelansichtstabelle | ✅ Ja | collection_view | type = "table" (Standard -Tabellenansicht) |
| Sammlungsansicht Galerie | ✅ Ja | collection_view | type = "gallery" (Gitteransicht) |
| Sammelansicht | ✅ Ja | collection_view | type = "board" (Kanban View) |
| Sammelansichtsliste | ✅ Ja | collection_view | type = "list" (vertikale Listenansicht) |
| Sammlungsansichtskalender | Fehlen | collection_view | type = "calendar" (Eingebettes Kalenderansicht) |
| Seite Ansicht Seite | ✅ Ja | collection_view_page | Sammlungsansicht als eigenständige Seite |
Bitte teilen Sie uns mit, ob Sie Probleme oder fehlende Blöcke finden.
Alle bekannten Blöcke und bekanntesten Konfigurationseinstellungen finden Sie in unserer Testsuite.
Google Lighthouse-Ergebnisse für eine Beispielseite, die von `react-notion-x` auf Vercel wiedergegeben wird.
react-notion-x ist nicht leicht und relativ leicht, aber es gibt einige wichtige Faktoren, die sich bewusst sind.
BundlePhobia meldet eine ~ 28 KB Gzip-Bündelgröße für das Haupt react-notion-x Bündel. Dies enthält nicht die optionalen Komponenten third-party , die wir nur dann über NEXT/Dynamic empfehlen, wenn eine Seite sie benötigt.
Ein weiterer Hauptfaktor für Perf stammt aus Bildern, die im Begriff gehostet werden. Sie sind im Allgemeinen nicht optimiert, nicht ordnungsgemäß dimensioniert und nicht zwischengespeichert, da der Begriff sich mit einer feinkörnigen Zugriffskontrolle befassen muss, die Benutzer jederzeit ändern können. Sie können die Standard mapImageUrl -Funktion auf NotionRenderer überschreiben, um das Caching über ein CDN wie CloudFlare -Mitarbeiter hinzuzufügen.
NotionRenderer unterstützt auch das Laden von Lazy Images mit optionalen Voransichten von Image -Platzhaltern mit geringer Qualität. Auf dieser Seite können Sie eine Demo davon in der Praxis sehen, bei der LQIP-Modern-Vorbereitungsbilder vor der Generate verwendet werden, die durch das Bildladen von Medium.com inspiriert sind.
Wenn Sie Next.js verwenden, empfehlen wir next/image oder next/legacy/image und next/link zum Renderer wie folgt:
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
} }
/>
) Dies wickelt diese nächsten.js-Komponenten in eine Kompatabilitätsschicht, sodass NotionRenderer sie genauso wie ihre Nicht-NEEXT.JS-Äquivalente <img> und <a> verwenden kann.
Beachten Sie, dass die benutzerdefinierte Bildkomponente derzeit nur mit Vorschau -Bild oder durch Einschalten von forceCustomImages of NotionRenderer aktiviert ist.
react-notion-x unter der Motorhaubereact-notion-x begann als Gabel von react-notion mit besserer Unterstützung für verschiedene Arten von Begriffsinhalten (insbesondere Sammlungen) und entwickelte sich zu etwas viel umfassenderemreact-notion ist nicht mehr aktiv aufrechterhaltennotion-types und notion-client sind eine Umschreibung des notion-api-workerreact-notion-x ist das Server-Side-Rendering über Next.js. In diesem Fall ist der CF-Arbeiter unnötigSiehe den Beitragsführer und schließen Sie sich unserer erstaunlichen Liste der Mitwirkenden an!
MIT © Travis Fischer
Dieses Projekt erweitert die MIT-lizenzierte Arbeit von Timo Lins, Tobias Lins, Sam Wight und anderen Mitwirkenden.
Unterstützen Sie meine OSS -Arbeit, indem Sie mir auf Twitter folgen
Super.so war freundlich genug, um dieses Projekt zu sponsern. Wenn Sie nach einer gehosteten Lösung suchen, die einen sehr ähnlichen Ansatz für react-notion-x verfolgt, aber alle Details für Sie behandelt, überprüfen Sie sie auf jeden Fall.
