Rendu REACT rapide et précis pour la notion. Batteries TS incluses. ⚡️
Si vous souhaitez simplement publier un site Web en utilisant la notion, nous vous recommandons fortement d'utiliser Super.so - une solution hébergée avec un grand perf qui s'occupe de tous les détails pour vous.
Si vous voulez plus de contrôle sur votre site Web via React, nous vous recommandons de consulter le kit de démarrage Next.js qui accompagne, qui est gratuit et utilise react-notion-x sous le capot.
Et si vous voulez encore plus de contrôle, alors vous êtes au bon endroit! ??
next/dynamicnext/image avec les images de prévisualisation LQIP (démo)Vous voudrez d'abord récupérer le contenu pour une page de notion:
import { NotionAPI } from 'notion-client'
const notion = new NotionAPI ( )
const recordMap = await notion . getPage ( '067dd719a912471ea9a3ac10710e7fdf' )Une fois que vous avez les données pour une page de notion, vous pouvez les rendre via React:
import * as React from 'react'
import { NotionRenderer } from 'react-notion-x'
export default ( { recordMap } ) => (
< NotionRenderer recordMap = { recordMap } fullPage = { true } darkMode = { false } />
) Remarque: Pour les blocs plus lourds, vous devrez opter pour les utiliser via NotionRenderer.components . Celles-ci ne sont pas incluses dans l'exportation NotionRenderer par défaut car ils sont trop lourds pour de nombreux cas d'utilisation.
Vous devrez également importer des styles CSS. Si vous utilisez next.js, nous vous recommandons de placer ces importations en haut des 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' Les importations par défaut de react-notion-x s'efforcent d'être aussi légères que possible. La plupart des blocs rendront très bien, mais certains blocs plus grands comme les PDF et les vues de collecte (vues de base de données) ne sont pas inclus par défaut.
Pour les utiliser, vous devrez importer ceux que vous souhaitez de 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'Notez que nous recommandons fortement de la charge paresseuse de ces composants, sauf si vous savez que vous en aurez besoin à l'avance pour votre cas d'utilisation.
Si vous utilisez Next.js, vous pouvez utiliser Next / Dynamic pour les charger paresseusement. Si votre contenu de notion n'utilise pas l'un de ces composants poids lourds, il ne sera pas chargé dans votre page. Cela maintient le paquet de pages initial petit et votre site Web se sentant.
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
}
) Vous devrez les activer en les transmettant à l'hélice des components de NotionRenderer .
export default ( { recordMap } ) => (
< NotionRenderer
recordMap = { recordMap }
components = { {
Code ,
Collection ,
Equation ,
Modal ,
Pdf
} }
/>
) Le composant Code utilise Prism sous le capot. Il est livré avec une prise en charge de JavaScript, TypeScript et CSS par défaut. Pour ajouter une prise en charge des syntaxes linguistiques supplémentaires, suivez l'exemple dans components/NotionPage.tsx qui charge paresseusement les composants Prism au moment de l'exécution. Vous voudrez probablement ajouter prismjs à votre projet comme une dépendance lorsque vous utilisez le composant Code afin que TypeScript ne se plaigne pas.
Pour le support Equation , vous devrez importer les styles Katex CSS.
Pour chacun de ces composants facultatifs, assurez-vous que vous importez également le CSS tiers pertinent si nécessaire (ci-dessus).
Vous pouvez éventuellement transmettre un authToken et activeUser à l'API si vous souhaitez accéder aux pages de notion privées. Les deux peuvent être récupérés de votre navigateur Web. Une fois que vous consultez votre espace de travail, ouvrez vos outils de développement> Application> Cookie> et copiez le token_v2 et notion_user_id . Respectivement, activeUser: notion_user_id, authtoken: token_v2.
Nous vous recommandons de les stocker comme variables d'environnement et de les transmettre dans le constructeur NotionAPI comme suit:
const notion = new NotionAPI ( {
activeUser : process . env . NOTION_ACTIVE_USER ,
authToken : process . env . NOTION_TOKEN_V2
} ) Notez que ce n'est pas la même chose que le jeton API fourni par l'API de notion officielle car notion-client utilise l'API de notion non officielle (ce que toutes les applications de notion utilisent).
Voici un exemple minimal Next.js avec le code le plus important dans pages/[pageId].tsx et components/NotionPage.tsx . Vous pouvez voir cet exemple en direct sur Vercel.
Voici components/NotionPage.tsx exemple NEXT.JS plus complet pages/[pageId].tsx Vous pouvez voir cet exemple en direct sur Vercel.
La démo complète ajoute quelques belles fonctionnalités:
Pour un exemple de production, consultez le kit de démarrage Next.js Notion, qui utilise react-notion-x sous le capot.
| Emballer | NPM | Environnement | Description |
|---|---|---|---|
| react-notion-x | Navigateur + SSR | Rendu de réaction rapide pour la notion. | |
| notion-client | Côté serveur * | Client TypeScript robuste pour l'API de notion. | |
| des types de notion | Universel | Types de dactylographie de notion de base. | |
| notion-utiles | Universel | Utilitaires utiles pour travailler avec les données de notion. |
* L'API de la notion ne doit pas être appelée à partir de navigateurs côté client en raison des restrictions CORS. notion-client est compatible avec Node.js et Deno.
La majorité des blocs de notion et des vues de collecte sont entièrement pris en charge.
| Type de bloc | Soutenu | Enum de type de bloc | Notes |
|---|---|---|---|
| Page | ✅ Oui | page | |
| Texte | ✅ Oui | text | Prend en charge toutes les options de formatage de texte connues |
| Mettre en signet | ✅ Oui | bookmark | Aperçu intégré de l'URL externe |
| Liste à puces | ✅ Oui | bulleted_list | <ul> |
| Liste numérotée | ✅ Oui | numbered_list | <ol> |
| En-tête 1 | ✅ Oui | header | <h1> |
| En-tête 2 | ✅ Oui | sub_header | <h2> |
| En tête 3 | ✅ Oui | sub_sub_header | <h3> |
| Citation | ✅ Oui | quote | |
| Appeler | ✅ Oui | callout | |
| Équation (bloc) | ✅ Oui | equation | katex via react-katex |
| Équation (en ligne) | ✅ Oui | text | katex via react-katex |
| Todos (cases) | ✅ Oui | to_do | |
| Table des matières | ✅ Oui | table_of_contents | Voir notion-utils getPageTableOfContents helper funtion |
| Diviseur | ✅ Oui | divider | Ligne horizontale |
| Colonne | ✅ Oui | column | |
| Liste de colonnes | ✅ Oui | column_list | |
| Basculer | ✅ Oui | toggle | <details> |
| Image | ✅ Oui | image | <img> |
| Encombrer | ✅ Oui | embed | INCRADE iframe GÉNÉRIQUE |
| Vidéo | ✅ Oui | video | iframe |
| Figure | ✅ Oui | figma | iframe |
| Google cartes | ✅ Oui | maps | iframe |
| Google Drive | ✅ Oui | drive | Google Docs, Feuilles, etc. |
| Tweeter | ✅ Oui | tweet | Utilise le SDK intégrant Twitter |
| ✅ Oui | pdf | Utilise des URL signées S3 et React-PDF | |
| Audio | ✅ Oui | audio | Utilise des URL signées S3 et un élément audio HTML5 |
| Déposer | ✅ Oui | file | Utilise des URL signées S3 (fichier téléchargeable générique) |
| Lien | ✅ Oui | text | Liens externes |
| Lien de page | ✅ Oui | page | Lien vers une page de notion dans le même espace de travail |
| Lien de page externe | ✅ Oui | text | Liens vers une page de notion ou une vue de collection dans un autre espace de travail |
| Code (bloc) | ✅ Oui | code | Syntaxe de code de bloc mettant en évidence via PrismJS |
| Code (en ligne) | ✅ Oui | text | Formatage du code en ligne (pas de mise en évidence de syntaxe) |
| Collections | ✅ Oui | Également connu sous le nom de bases de données | |
| Vue de collecte | ✅ Oui | collection_view | Les collections ont une cartographie 1: N pour les vues de collecte |
| Table de vue de la collection | ✅ Oui | collection_view | type = "table" (vue par défaut du tableau) |
| Galerie de vue de la collection | ✅ Oui | collection_view | type = "gallery" (vue sur la grille) |
| COLLECT VIEW BARCH | ✅ Oui | collection_view | type = "board" (View Kanban) |
| Liste de vue de la collection | ✅ Oui | collection_view | type = "list" (vue de liste verticale) |
| Calendrier de vue de la collection | Manquant | collection_view | type = "calendar" (vue de calendrier intégrée) |
| Page de vue de la collection | ✅ Oui | collection_view_page | Vue de collection comme une page autonome |
Veuillez nous faire savoir si vous trouvez des problèmes ou des blocs manquants.
Tous les blocs connus et les paramètres de configuration les plus connus peuvent être trouvés dans notre suite de tests.
Google Lighthouse scores pour un exemple de page rendue par `React-Notion-X` sur Vercel.
Hors de la boîte, react-notion-x est assez rapide et relativement léger, mais il y a quelques facteurs clés à connaître.
Bundlephobia rapporte une taille de faisceau GZIP de ~ 28 Ko pour le pack react-notion-x principal. Cela n'inclut pas les composants third-party en option que nous recommandons le chargement paresseux via Next / Dynamic uniquement si une page en a besoin.
Un autre facteur majeur pour Perf provient d'images hébergées par la notion. Ils ne sont généralement pas optimisés, de taille indispensable et non craquables car la notion doit faire face au contrôle d'accès à grain fin que les utilisateurs peuvent changer à tout moment. Vous pouvez remplacer la fonction mapImageUrl par défaut sur NotionRenderer pour ajouter de la mise en cache via un CDN comme les travailleurs de CloudFlare, ce que fait la notion X pour les vitesses de chargement de page optimales.
NotionRenderer prend également en charge le chargement d'image paresseux avec des aperçus d'image de faible qualité en option. Vous pouvez voir une démo de ceci en pratique sur cette page qui utilise des images d'espace réservés LQIP-modern pour générer le chargement d'image de Mediars.com.
Si vous utilisez next.js, nous vous recommandons de passer next/image ou next/legacy/image , et next/link vers le rendu comme suit:
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
} }
/>
) <img> <a> ces composants NotionRenderer .
Notez que le composant d'image personnalisé n'est actuellement activé qu'avec l'image de prévisualisation ou en activant forceCustomImages de NotionRenderer .
react-notion-x sous le capotreact-notion-x a commencé comme une fourche de react-notion avec un meilleur support pour différents types de contenu de notion (en particulier les collections) et est devenu quelque chose de beaucoup plus completreact-notion n'est plus activement maintenunotion-types et notion-client sont une réécriture de notion-api-workerreact-notion-x est le rendu côté serveur via Next.js, auquel cas le travailleur CF n'est pas nécessaireVoir le guide de contribution et rejoignez notre liste incroyable de contributeurs!
MIT © Travis Fischer
Ce projet étend les travaux liés au MIT par Timo Lins, Tobias Lins, Sam Wight et d'autres contributeurs.
Soutenez mon travail OSS en me suivant sur Twitter
Super.So a eu la gentillesse de parrainer ce projet. Si vous recherchez une solution hébergée qui adopte une approche très similaire à react-notion-x mais gère tous les détails pour vous, alors vérifiez-les certainement.
