Быстрый и точный react renderer для понятия. Т.С. батареи включены. ⚡
Если вы просто хотите опубликовать веб -сайт с использованием понятия, мы настоятельно рекомендуем использовать Super.so - размещенное решение с отличным перфу, которое заботится обо всех деталях для вас.
Если вы хотите большего контроля над вашим веб-сайтом через React, то мы рекомендуем проверить сопровождающий набор стартового набора Next.js, который бесплатный и использует react-notion-x под капюшоном.
И если вы хотите еще больше контроля, то вы находитесь в нужном месте! ??
next/dynamicnext/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 старается быть максимально легким. Большинство блоков будут выполняться очень хорошо, но некоторые большие блоки, такие как PDFS и представления сбора (представления базы данных) не включены по умолчанию.
Чтобы использовать их, вам нужно импортировать те, которые вы хотите, от 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, вы можете использовать следующую/динамическую, чтобы лениво загрузить их. Если ваше содержание понятия не использует один из этих компонентов в тяжелом весе, то оно не будет загружено на вашу страницу. Это сохраняет начальную страницу, а ваш сайт чувствует себя резким.
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
}
) Вам нужно будет включить их, передавая их в components Prop of NotionRenderer .
export default ( { recordMap } ) => (
< NotionRenderer
recordMap = { recordMap }
components = { {
Code ,
Collection ,
Equation ,
Modal ,
Pdf
} }
/>
) Code компонент использует призму под капюшоном. Он поставляется в комплекте с поддержкой JavaScript, TypeScript и CSS по умолчанию. Чтобы добавить поддержку дополнительных языковых синтаксисов, следуйте примеру в components/NotionPage.tsx который лениво загружает компоненты PRISM во время выполнения. Скорее всего, вы захотите добавить prismjs в свой проект в качестве зависимости при использовании компонента Code поэтому TypeScript не жалуется.
Для поддержки Equation вам нужно импортировать стили Katex CSS.
Для каждого из этих дополнительных компонентов убедитесь, что вы также импортируете соответствующие сторонние CSS, если это необходимо (выше).
Вы можете при желании передать authToken и activeUser API, если хотите получить доступ к частным страницам понятий. Оба могут быть извлечены из вашего веб -браузера. Как только вы просмотрите свое рабочее пространство, откройте инструменты разработки> приложение> Cookie> и скопируйте token_v2 и notion_user_id . Соответственно, ActiveUser: motion_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 понятия (что использует все приложения для понятий).
components/NotionPage.tsx минимальный проект следующего pages/[pageId].tsx Вы можете просмотреть этот пример Live на Vercel.
Вот components/NotionPage.tsx полнофункциональный проект следующего pages/[pageId].tsx Вы можете просмотреть этот пример Live на Vercel.
Полнофункциональная демонстрация добавляет несколько хороших функций:
Для производственного примера ознакомьтесь с react-notion-x набором.
| Упаковка | Npm | Среда | Описание |
|---|---|---|---|
| React-Notion-X | Браузер + SSR | Быстрое реагирование для понятия. | |
| понятие-клиент | Серверная сторона* | Надежный клиент TypeScript для API понятия. | |
| типы понятия | Универсальный | Основные типы типов типов. | |
| умывание понятия | Универсальный | Полезные утилиты для работы с данными понятия. |
* API понятия не следует вызывать из браузеров на стороне клиента из-за ограничений CORS. notion-client совместим с Node.js и Deno.
Большинство блоков понятия и просмотров сбора полностью поддерживаются.
| Тип блока | Поддерживается | Блок типа enum | Примечания |
|---|---|---|---|
| Страница | ✅ Да | 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 |
| Делитель | ✅ Да | divider | Горизонтальная линия |
| Столбец | ✅ Да | column | |
| Список столбцов | ✅ Да | column_list | |
| Переключать | ✅ Да | toggle | <details> |
| Изображение | ✅ Да | image | <img> |
| Внедрение | ✅ Да | embed | Общие вставки iframe |
| Видео | ✅ Да | video | iframe |
| Фигма | ✅ Да | figma | iframe |
| Карты Google | ✅ Да | maps | iframe |
| Google Drive | ✅ Да | drive | Google Docs, листы и т. Д. |
| Твит | ✅ Да | tweet | Использует Twitter, встраивая SDK |
| ✅ Да | pdf | Использует подписанные S3 URL и React-PDF | |
| Аудио | ✅ Да | audio | Использует S3 -подписанные URL -адреса и audio HTML5 |
| Файл | ✅ Да | file | Использует S3 подписанные URL -адреса (общий загружаемый файл) |
| Связь | ✅ Да | text | Внешние ссылки |
| Ссылка страницы | ✅ Да | page | Ссылка на страницу понятия в том же рабочем пространстве |
| Ссылка на внешнюю страницу | ✅ Да | text | Ссылки на страницу понятия или представление коллекции в другой рабочей области |
| Код (блок) | ✅ Да | code | Синтаксис кода блока с помощью Prismjs |
| Код (встроенный) | ✅ Да | text | Встроенное форматирование кода (без синтаксиса). |
| Коллекции | ✅ Да | Также известный как базы данных | |
| Коллекция | ✅ Да | collection_view | Коллекции имеют сопоставление 1: N с просмотров сбора |
| Коллекционная таблица просмотра | ✅ Да | collection_view | type = "table" (представление таблицы по умолчанию) |
| Collection View Gallery | ✅ Да | collection_view | type = "gallery" (вид сетки) |
| Коллекция просмотра доски | ✅ Да | collection_view | type = "board" (Kanban View) |
| Список просмотра коллекции | ✅ Да | collection_view | type = "list" (Vertical Sist View) |
| Collection View Calendar | Отсутствующий | collection_view | type = "calendar" (встроенный календарный вид) |
| Страница просмотра коллекции | ✅ Да | collection_view_page | Просмотр коллекции как отдельная страница |
Пожалуйста, дайте нам знать, если вы найдете какие -либо проблемы или отсутствующие блоки.
Все известные блоки и наиболее известные настройки конфигурации можно найти в нашем наборе тестирования.
Google Lighthouse оценки для примера страницы, отображаемой `React-Notion-X` на Vercel.
Из коробки react-notion-x довольно быстрый и относительно легкий, но есть несколько ключевых факторов, которые следует знать.
Bundlephobia сообщает об размере пакета GZIP ~ 28 КБ для основного пакета react-notion-x . Это не включает дополнительные third-party компоненты, которые мы рекомендуем ленивую загрузку через Next/Dynamic только в том случае, если странице нуждается в них.
Еще один важный фактор для PERF исходит из изображений, размещенных по понятию. Как правило, они неоптимизированы, неправильно размер, и не кшируются, потому что понятие должно иметь дело с мелкозернистым контролем доступа, который пользователи могут измениться в любое время. Вы можете переопределить функцию mapImageUrl по умолчанию на NotionRenderer , чтобы добавить кэширование с помощью CDN, таких как работники CloudFlare, что является то, что является понятием X для оптимальной скорости нагрузки страницы.
NotionRenderer также поддерживает ленивую загрузку изображения с помощью дополнительных предварительных просмотров заполнителей низкокачественного изображения. Вы можете увидеть демонстрацию этого на практике на этой странице, которая использует LQIP-модерн и предварительно генерируемые изображения заполнителей, которые вдохновлены загрузкой изображения 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 может использовать их так же, как и их эквиваленты js js <img> и <a> .
Обратите внимание, что пользовательский компонент изображения в настоящее время включен только с изображением предварительного просмотра или путем включения forceCustomImages of NotionRenderer .
react-notion-x под капотомreact-notion-x начался как вилка react-notion с лучшей поддержкой различных типов содержания понятий (особенно коллекций) и превратился в нечто гораздо более полноеreact-notion больше не поддерживается активноnotion-types и notion-client являются переписыванием notion-api-workerreact-notion-x является рендеринг на стороне сервера через next.js, и в этом случае работник CF не нуженСм. Руководство по взносу и присоединяйтесь к нашему удивительному списку участников!
MIT © Трэвис Фишер
Этот проект расширяет MIT-лицензированную работу Тимо Линса, Тобиаса Линса, Сэма Уайта и других участников.
Поддержите мою работу OSS, следуя за мной в Твиттере
Super.so был достаточно любезен, чтобы спонсировать этот проект. Если вы ищете размещенное решение, которое требует очень похожего подхода для react-notion-x но обрабатывает все детали для вас, то обязательно проверьте их.
