Reaccionador de reacción rápido y preciso para la noción. Las baterías TS incluidas. ⚡️
Si solo desea publicar un sitio web utilizando la noción, le recomendamos que use Super.so: una solución alojada con excelente perfil que se encarga de todos los detalles para usted.
Si desea más control sobre su sitio web a través de React, le recomendamos revisar el kit de inicio de Next.js acompañante, que es gratuito y usa react-notion-x debajo del capó.
Y si quieres aún más control, ¡estás en el lugar correcto! ?
next/dynamicnext/image junto con imágenes de vista previa de LQIP (demostración)Primero querrá obtener el contenido para una página de noción:
import { NotionAPI } from 'notion-client'
const notion = new NotionAPI ( )
const recordMap = await notion . getPage ( '067dd719a912471ea9a3ac10710e7fdf' )Una vez que tenga los datos para una página de noción, puede renderizarlos a través de React:
import * as React from 'react'
import { NotionRenderer } from 'react-notion-x'
export default ( { recordMap } ) => (
< NotionRenderer recordMap = { recordMap } fullPage = { true } darkMode = { false } />
) Nota: Para los bloques más pesados, tendrá que optar por usarlos a través de NotionRenderer.components . Estos no están incluidos en la exportación predeterminada NotionRenderer porque son demasiado pesados para muchos casos de uso.
También necesitará importar algunos estilos CSS. Si está utilizando Next.js, le recomendamos que coloque estas importaciones en la parte superior de 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' Las importaciones predeterminadas de react-notion-x se esfuerzan por ser lo más liviano posible. La mayoría de los bloques funcionarán bien, pero algunos bloques más grandes como PDF y vistas de colección (vistas de la base de datos) no se incluyen de forma predeterminada.
Para usarlos, necesitará importar los que desee 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'Tenga en cuenta que recomendamos encarecidamente la carga perezosa de estos componentes a menos que sepa que los necesitará por adelantado para su caso de uso.
Si está utilizando Next.js, puede usar Next/Dynamic para cargarlos perezosamente. Si su contenido de noción no usa uno de estos componentes de peso pesado, entonces no se cargará en su página. Esto mantiene el paquete de página inicial pequeño y su sitio web se siente ágil.
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
}
) Deberá habilitarlos pasándolos al accesorio de components del NotionRenderer .
export default ( { recordMap } ) => (
< NotionRenderer
recordMap = { recordMap }
components = { {
Code ,
Collection ,
Equation ,
Modal ,
Pdf
} }
/>
) El componente Code usa prisma debajo del capó. Viene incluido con soporte para JavaScript, TypeScript y CSS de forma predeterminada. Para agregar soporte para sintaxis de lenguaje adicional, siga el ejemplo en components/NotionPage.tsx que carga perezosamente los componentes de Prism en tiempo de ejecución. Es probable que desee agregar prismjs a su proyecto como dependencia cuando use el componente Code para que TypeScript no se queje.
Para el soporte Equation , necesitará importar los estilos Katex CSS.
Para cada uno de estos componentes opcionales, asegúrese de importar el CSS de terceros relevante si es necesario (arriba).
Opcionalmente, puede pasar un authToken y activeUser a la API si desea acceder a páginas de nociones privadas. Ambos se pueden recuperar de su navegador web. Una vez que esté viendo su espacio de trabajo, abra sus herramientas de desarrollo> Aplicación> Cookie> y copie token_v2 y notion_user_id . Respectivamente, ActiveUser: Notion_user_id, AuthToken: token_v2.
Recomendamos almacenarlos como variables de entorno y pasarlas al constructor NotionAPI de la siguiente manera:
const notion = new NotionAPI ( {
activeUser : process . env . NOTION_ACTIVE_USER ,
authToken : process . env . NOTION_TOKEN_V2
} ) Tenga en cuenta que esto no es lo mismo que el token API proporcionado por la API de noción oficial, ya que notion-client usa la API de noción no oficial (que es lo que usan todas las aplicaciones de noción).
Aquí hay un proyecto de ejemplo mínimo de Next.js con el código más importante en pages/[pageId].tsx y components/NotionPage.tsx . Puede ver este ejemplo en vivo en Vercel.
Aquí hay un proyecto de ejemplo de Next.js más completo con el código más importante en pages/[pageId].tsx y components/NotionPage.tsx . Puede ver este ejemplo en vivo en Vercel.
La demostración con todas las funciones agrega algunas características agradables:
Para obtener un ejemplo de producción, consulte el kit de inicio de noción Next.js, que utiliza react-notion-x debajo del capó.
| Paquete | Npm | Ambiente | Descripción |
|---|---|---|---|
| react-notion-x | Navegador + SSR | REACTER RESCENTADO RESCUESTO PARA LA NOCIÓN. | |
| noción-cliente | Del lado del servidor* | Cliente TypeScript robusto para la API de noción. | |
| tipos de nociones | Universal | Tipos de tipos de mecanografías de noción central. | |
| noción | Universal | Utilidades útiles para trabajar con datos de noción. |
* La API de la noción no debe llamarse desde los navegadores del lado del cliente debido a las restricciones CORS. notion-client es compatible con Node.js y Deno.
La mayoría de los bloques de nociones y las vistas a la recolección son totalmente compatibles.
| Tipo de bloque | Compatible | Bloque de tipo enum | Notas |
|---|---|---|---|
| Página | ✅ Sí | page | |
| Texto | ✅ Sí | text | Admite todas las opciones de formato de texto conocidas |
| Marcador | ✅ Sí | bookmark | Vista previa integrada de URL externa |
| Lista de balas | ✅ Sí | bulleted_list | <ul> |
| Lista numerada | ✅ Sí | numbered_list | <ol> |
| Encabezado 1 | ✅ Sí | header | <h1> |
| Encabezado 2 | ✅ Sí | sub_header | <h2> |
| Encabezado 3 | ✅ Sí | sub_sub_header | <h3> |
| Cita | ✅ Sí | quote | |
| Gritar | ✅ Sí | callout | |
| Ecuación (bloque) | ✅ Sí | equation | Katex a través de React-katex |
| Ecuación (en línea) | ✅ Sí | text | Katex a través de React-katex |
| TODOS (casillas de verificación) | ✅ Sí | to_do | |
| Tabla de contenido | ✅ Sí | table_of_contents | Ver notion-utils getPageTableOfContents Función auxiliar |
| Divisor | ✅ Sí | divider | Línea horizontal |
| Columna | ✅ Sí | column | |
| Lista de columnas | ✅ Sí | column_list | |
| Palanca | ✅ Sí | toggle | <details> |
| Imagen | ✅ Sí | image | <img> |
| Empotrar | ✅ Sí | embed | iframe genérico incrustaciones |
| Video | ✅ Sí | video | iframe |
| Figma | ✅ Sí | figma | iframe |
| Google Maps | ✅ Sí | maps | iframe |
| Google Drive | ✅ Sí | drive | Google Docs, sábanas, etc. Incremisión personalizada |
| Piar | ✅ Sí | tweet | Utiliza el SDK de incrustación de Twitter |
| ✅ Sí | pdf | Utiliza URL firmadas S3 y react-PDF | |
| Audio | ✅ Sí | audio | Utiliza URL firmadas S3 y elemento audio HTML5 |
| Archivo | ✅ Sí | file | Utiliza URL firmadas S3 (archivo genérico descargable) |
| Enlace | ✅ Sí | text | Enlaces externos |
| Enlace de página | ✅ Sí | page | Enlace a una página de noción en el mismo espacio de trabajo |
| Enlace de página externo | ✅ Sí | text | Enlaces a una página de noción o vista de colección en otro espacio de trabajo |
| Código (bloque) | ✅ Sí | code | Bloquear sintaxis de código resaltando a través de PrismJS |
| Código (en línea) | ✅ Sí | text | Formato de código en línea (no resaltado sin sintaxis) |
| Colecciones | ✅ Sí | También conocido como bases de datos | |
| Vista de colección | ✅ Sí | collection_view | Las colecciones tienen un mapeo de 1: N a las vistas de la colección |
| Tabla de vista de colección | ✅ Sí | collection_view | type = "table" (Vista de tabla predeterminada) |
| Galería de vista de colección | ✅ Sí | collection_view | type = "gallery" (Vista de cuadrícula) |
| Tablero de vista de colección | ✅ Sí | collection_view | type = "board" (Kanban View) |
| Lista de vista de colección | ✅ Sí | collection_view | type = "list" (Vista de lista vertical) |
| Calendario de vista de colección | Desaparecido | collection_view | type = "calendar" (vista de calendario integrado) |
| Página de vista de colección | ✅ Sí | collection_view_page | Vista de colección como una página independiente |
Háganos saber si encuentra algún problema o bloques faltantes.
Todos los bloques conocidos y la configuración más conocida se pueden encontrar en nuestro conjunto de pruebas.
Los puntajes de Google Lighthouse para una página de ejemplo representada por `React-Notion-X` en Vercel.
Fuera de la caja, react-notion-x es bastante rápido y relativamente ligero, pero hay algunos factores clave a tener en cuenta.
BundlePhobia informa un tamaño de paquete GZIP de ~ 28 kb para el paquete principal react-notion-x . Esto no incluye los componentes third-party opcionales que recomendamos la carga perezosa a través de Next/Dynamic solo si una página los necesita.
Otro factor importante para el PERF proviene de imágenes alojadas por noción. Generalmente no tienen optimización, de tamaño incorrecto y no almacenable en caché porque la noción tiene que lidiar con el control de acceso de grano fino que los usuarios pueden cambiar en cualquier momento. Puede anular la función mapImageUrl predeterminada en NotionRenderer para agregar caché a través de un CDN como los trabajadores de CloudFlare, que es lo que la noción X hace para las velocidades de carga de página óptimas.
NotionRenderer también admite la carga de imágenes perezosas con vistas previas de marcador de posición de imagen de baja calidad opcional. Puede ver una demostración de esto en la práctica en esta página que está utilizando LQIP-Modern para pregenerar imágenes de marcador de posición inspiradas en la carga de imágenes de Medium.com.
Si está usando Next.js, recomendamos pasar next/image o next/legacy/image , y next/link al Renderizador de la siguiente manera:
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
} }
/>
) Esto envuelve estos componentes Next.js en una capa de compatibilidad, por lo que NotionRenderer puede usarlos igual que sus equivalentes que no son next.js <img> y <a> .
Tenga en cuenta que el componente de imagen personalizado solo solo está habilitado con la imagen de vista previa o al activar forceCustomImages of NotionRenderer .
react-notion-x debajo del capóreact-notion-x comenzó como una bifurcación de react-notion con un mejor soporte para diferentes tipos de contenido de noción (especialmente colecciones) y se convirtió en algo mucho más integralreact-notion ya no se mantiene activamentenotion-types y notion-client son una reescritura de notion-api-workerreact-notion-x es la representación del lado del servidor a través de Next.js, en cuyo caso el trabajador de CF es innecesario¡Vea la Guía de contribución y únase a nuestra increíble lista de contribuyentes!
MIT © Travis Fischer
Este proyecto extiende el trabajo con licencia del MIT por Timo Lins, Tobias Lins, Sam Wight y otros contribuyentes.
Apoye mi trabajo de OSS siguiéndome en Twitter
Super.so ha tenido la amabilidad de patrocinar este proyecto. Si está buscando una solución alojada que adopte un enfoque muy similar para react-notion-x pero maneje todos los detalles para usted, entonces definitivamente consulte.
