react-notion-x
    TypeScript icon, indicating that this package has built-in type declarations

    4.9.9 • Public • Published

    React Notion X

    React Notion X

    Fast and accurate React renderer for Notion.

    NPM Build Status Prettier Code Formatting

    Install

    npm install react-notion-x

    Usage

    First you'll want to fetch the content for a Notion page:

    import { NotionAPI } from 'notion-client'
    
    const api = new NotionAPI()
    
    // fetch the page's content, including all async blocks, collection queries, and signed urls
    const recordMap = await api.getPage('067dd719a912471ea9a3ac10710e7fdf')

    Once you have the data for a Notion page, you can render it:

    import React from 'react'
    import { NotionRenderer } from 'react-notion-x'
    
    export default ExampleNotionPage({ recordMap }) => (
      <NotionRenderer
        recordMap={recordMap}
        fullPage={true}
        darkMode={false}
      />
    )

    Styles

    You'll need to import some CSS styles as well. If you're using Next.js, we recommend you put these in 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 collection views (optional)
    import 'rc-dropdown/assets/index.css'
    
    // used for rendering equations (optional)
    import 'katex/dist/katex.min.css'

    License

    MIT © Travis Fischer

    Support my OSS work by following me on twitter twitter

    Keywords

    none

    Install

    npm i react-notion-x

    DownloadsWeekly Downloads

    3,922

    Version

    4.9.9

    License

    MIT

    Unpacked Size

    1.5 MB

    Total Files

    494

    Last publish

    Collaborators

    • fisch0920
    • noahbragg