Renderer bereaksi cepat dan akurat untuk gagasan. Termasuk baterai TS. ⚡️
Jika Anda hanya ingin menerbitkan situs web menggunakan NOTION, maka kami sangat merekomendasikan menggunakan Super.so - solusi yang di -host dengan perf hebat yang menangani semua detail untuk Anda.
Jika Anda react-notion-x lebih banyak kontrol atas situs web Anda melalui React, maka kami sarankan untuk memeriksa starter kit selanjutnya.
Dan jika Anda ingin lebih banyak kontrol, maka Anda berada di tempat yang tepat! ??
next/dynamicnext/image Bersama dengan LQIP Preview Images (Demo)Pertama, Anda ingin mengambil konten untuk halaman gagasan:
import { NotionAPI } from 'notion-client'
const notion = new NotionAPI ( )
const recordMap = await notion . getPage ( '067dd719a912471ea9a3ac10710e7fdf' )Setelah Anda memiliki data untuk halaman NOTION, Anda dapat membuatnya melalui React:
import * as React from 'react'
import { NotionRenderer } from 'react-notion-x'
export default ( { recordMap } ) => (
< NotionRenderer recordMap = { recordMap } fullPage = { true } darkMode = { false } />
) Catatan: Untuk blok yang lebih berat, Anda harus memilih untuk menggunakannya melalui NotionRenderer.components . Ini tidak termasuk dalam ekspor NotionRenderer default karena mereka terlalu berat untuk banyak kasus penggunaan.
Anda harus mengimpor beberapa gaya CSS juga. Jika Anda menggunakan Next.js, kami sarankan Anda menempatkan impor ini di bagian atas 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' Impor default dari react-notion-x berusaha sekuat mungkin. Sebagian besar blok akan membuat baik -baik saja, tetapi beberapa blok yang lebih besar seperti PDF dan tampilan koleksi (tampilan database) tidak termasuk secara default.
Untuk menggunakannya, Anda harus mengimpor yang Anda inginkan dari 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'Perhatikan bahwa kami sangat menyarankan untuk memuat komponen-komponen ini kecuali Anda tahu Anda akan membutuhkannya di muka untuk kasing Anda.
Jika Anda menggunakan Next.js, Anda dapat menggunakan Next/Dynamic untuk memuatnya dengan malas. Jika konten gagasan Anda tidak menggunakan salah satu komponen kelas berat ini, maka itu tidak akan dimuat ke halaman Anda. Ini membuat bundel halaman awal kecil dan situs web Anda terasa tajam.
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
}
) Anda harus mengaktifkannya dengan menyerahkannya ke components Prop of NotionRenderer .
export default ( { recordMap } ) => (
< NotionRenderer
recordMap = { recordMap }
components = { {
Code ,
Collection ,
Equation ,
Modal ,
Pdf
} }
/>
) Komponen Code menggunakan prisma di bawah kap. Muncul dibundel dengan dukungan untuk JavaScript, TypeScript, dan CSS secara default. Untuk menambahkan dukungan untuk sintaksis bahasa tambahan, ikuti contoh dalam components/NotionPage.tsx yang dengan malas memuat komponen prisma saat runtime. Anda mungkin ingin menambahkan prismjs ke proyek Anda sebagai ketergantungan saat menggunakan komponen Code sehingga TypeScript tidak mengeluh.
Untuk dukungan Equation , Anda harus mengimpor gaya Katex CSS.
Untuk masing-masing komponen opsional ini, pastikan Anda juga mengimpor CSS pihak ketiga yang relevan jika diperlukan (di atas).
Anda dapat secara opsional meneruskan authToken dan activeUser ke API jika Anda ingin mengakses halaman gagasan pribadi. Keduanya dapat diambil dari browser web Anda. Setelah Anda melihat ruang kerja Anda, buka alat pengembangan Anda> Aplikasi> Cookie> dan salin token_v2 dan notion_user_id . Masing -masing, ActiveUser: notion_user_id, authToken: token_v2.
Kami merekomendasikan untuk menyimpan ini sebagai variabel lingkungan dan meneruskannya ke konstruktor NotionAPI sebagai berikut:
const notion = new NotionAPI ( {
activeUser : process . env . NOTION_ACTIVE_USER ,
authToken : process . env . NOTION_TOKEN_V2
} ) Perhatikan bahwa ini tidak sama dengan token API yang disediakan oleh API Gagasan Resmi karena notion-client menggunakan API Gagasan Tidak Resmi (yang digunakan semua aplikasi NOMION).
Berikut proyek contoh minimal Next.js dengan kode paling penting di pages/[pageId].tsx dan components/NotionPage.tsx . Anda dapat melihat contoh ini secara langsung di Vercel.
Berikut adalah proyek contoh selanjutnya yang lebih lengkap dengan kode paling penting di pages/[pageId].tsx dan components/NotionPage.tsx . Anda dapat melihat contoh ini secara langsung di Vercel.
Demo fitur lengkap menambahkan beberapa fitur bagus:
Sebagai contoh produksi, lihat Next.js Notion Starter Kit, yang menggunakan react-notion-x di bawah kap.
| Kemasan | NPM | Lingkungan | Keterangan |
|---|---|---|---|
| react-notion-x | Browser + SSR | Renderer bereaksi cepat untuk gagasan. | |
| Gagasan-Klien | Sisi server* | Klien TypeScript yang kuat untuk API Notion. | |
| tipe gagasan | Universal | Jenis tipe naskah inti. | |
| gagasan-utang | Universal | Utilitas yang berguna untuk bekerja dengan data gagasan. |
* API Notion tidak boleh dipanggil dari browser sisi klien karena pembatasan CORS. notion-client kompatibel dengan Node.js dan Deno.
Mayoritas blok gagasan dan tampilan pengumpulan didukung sepenuhnya.
| Tipe blok | Didukung | Jenis blok enum | Catatan |
|---|---|---|---|
| Halaman | ✅ Ya | page | |
| Teks | ✅ Ya | text | Mendukung semua opsi pemformatan teks yang diketahui |
| Bookmark | ✅ Ya | bookmark | Pratinjau tertanam URL eksternal |
| Daftar Diselet | ✅ Ya | bulleted_list | <ul> |
| Daftar bernomor | ✅ Ya | numbered_list | <ol> |
| Menuju 1 | ✅ Ya | header | <h1> |
| Menuju 2 | ✅ Ya | sub_header | <h2> |
| Menuju 3 | ✅ Ya | sub_sub_header | <h3> |
| Mengutip | ✅ Ya | quote | |
| Callout | ✅ Ya | callout | |
| Persamaan (blok) | ✅ Ya | equation | Katex via React-Katex |
| Persamaan (inline) | ✅ Ya | text | Katex via React-Katex |
| Todos (kotak centang) | ✅ Ya | to_do | |
| Daftar isi | ✅ Ya | table_of_contents | Lihat notion-utils getPageTableOfContents helper funtion |
| Pembagi | ✅ Ya | divider | Garis horizontal |
| Kolom | ✅ Ya | column | |
| Daftar Kolom | ✅ Ya | column_list | |
| Toggle | ✅ Ya | toggle | <details> |
| Gambar | ✅ Ya | image | <img> |
| Menanamkan | ✅ Ya | embed | iframe generik embeds |
| Video | ✅ Ya | video | iframe |
| Figma | ✅ Ya | figma | iframe |
| Google Maps | ✅ Ya | maps | iframe |
| Google Drive | ✅ Ya | drive | Google docs, lembaran, dll. Embed khusus |
| Menciak | ✅ Ya | tweet | Menggunakan twitter embedding SDK |
| ✅ Ya | pdf | Menggunakan URL yang ditandatangani S3 dan React-PDF | |
| Audio | ✅ Ya | audio | Menggunakan URL yang ditandatangani S3 dan elemen audio HTML5 |
| Mengajukan | ✅ Ya | file | Menggunakan URL yang ditandatangani S3 (file yang dapat diunduh generik) |
| Link | ✅ Ya | text | Tautan eksternal |
| Tautan halaman | ✅ Ya | page | Tautan ke halaman gagasan di ruang kerja yang sama |
| Tautan halaman eksternal | ✅ Ya | text | Tautan ke halaman gagasan atau tampilan koleksi di ruang kerja lain |
| Kode (blok) | ✅ Ya | code | Menyoroti sintaks kode blok melalui prismjs |
| Kode (inline) | ✅ Ya | text | Pemformatan kode inline (tidak ada penyorotan sintaksis) |
| Koleksi | ✅ Ya | Juga dikenal sebagai database | |
| Tampilan Koleksi | ✅ Ya | collection_view | Koleksi memiliki pemetaan 1: n untuk tampilan koleksi |
| Tabel Tampilan Koleksi | ✅ Ya | collection_view | type = "table" (tampilan tabel default) |
| Galeri Tampilan Koleksi | ✅ Ya | collection_view | type = "gallery" (tampilan grid) |
| Papan Tampilan Koleksi | ✅ Ya | collection_view | type = "board" (tampilan kanban) |
| Daftar Tampilan Koleksi | ✅ Ya | collection_view | type = "list" (tampilan daftar vertikal) |
| Kalender Tampilan Koleksi | Hilang | collection_view | type = "calendar" (tampilan kalender tertanam) |
| Halaman tampilan koleksi | ✅ Ya | collection_view_page | Tampilan Koleksi sebagai Halaman Standalone |
Beri tahu kami jika Anda menemukan masalah atau blok yang hilang.
Semua blok yang diketahui dan pengaturan konfigurasi yang paling dikenal dapat ditemukan di suite tes kami.
Skor Google Lighthouse untuk contoh halaman yang diberikan oleh `react-notion-x` di Vercel.
Di luar kotak, react-notion-x cukup cepat dan relatif ringan, tetapi ada beberapa faktor kunci yang harus diperhatikan.
Bundlephobia melaporkan ukuran bundel GZIP ~ 28KB untuk bundel react-notion-x utama. Ini tidak termasuk komponen third-party opsional yang kami sarankan malas memuat melalui Next/Dynamic hanya jika halaman membutuhkannya.
Faktor utama lain untuk Perf berasal dari gambar yang diselenggarakan oleh Notion. Mereka umumnya tidak dioptimalkan, berukuran tidak tepat, dan tidak dapat di-cache karena gagasan harus berurusan dengan kontrol akses berbutir halus yang dapat diubah pengguna kapan saja. Anda dapat mengganti fungsi mapImageUrl default pada NotionRenderer untuk menambahkan caching melalui CDN seperti CloudFlare Workers, yang merupakan Gagasan X untuk kecepatan beban halaman yang optimal.
NotionRenderer juga mendukung pemuatan gambar malas dengan pratinjau placeholder gambar berkualitas rendah opsional. Anda dapat melihat demo ini dalam praktik pada halaman ini yang menggunakan LQIP-Modern untuk pra-menghasilkan gambar placeholder yang terinspirasi oleh pemuatan gambar Medium.com.
Jika Anda menggunakan Next.js, kami sarankan melewati next/image atau next/legacy/image , dan next/link ke Renderer sebagai berikut:
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> NotionRenderer selanjutnya.
Perhatikan bahwa komponen gambar kustom saat ini hanya diaktifkan dengan gambar pratinjau atau dengan menyalakan forceCustomImages of NotionRenderer .
react-notion-x di bawah kapreact-notion-x dimulai sebagai garpu react-notion dengan dukungan yang lebih baik untuk berbagai jenis konten gagasan (terutama koleksi) dan tumbuh menjadi sesuatu yang jauh lebih komprehensifreact-notion tidak lagi dipertahankan secara aktifnotion-types dan notion-client adalah penulisan ulang notion-api-workerreact-notion-x adalah rendering sisi server melalui next.js, dalam hal ini pekerja CF tidak perluLihat Panduan Kontribusi dan bergabunglah dengan daftar kontributor kami yang luar biasa!
MIT © Travis Fischer
Proyek ini memperluas pekerjaan berlisensi MIT oleh Timo Lins, Tobias Lins, Sam Wight, dan kontributor lainnya.
Dukung pekerjaan OSS saya dengan mengikuti saya di Twitter
Super.so cukup baik untuk mensponsori proyek ini. Jika Anda mencari solusi yang di-host yang mengambil pendekatan yang sangat mirip dengan react-notion-x tetapi menangani semua detail untuk Anda, maka pasti periksa.
