https://github.com/piotrzaborow/notion-blocks-react-renderer

React Renderer for @notionhq/client blocks
https://github.com/piotrzaborow/notion-blocks-react-renderer

notion notion-renderer react

Last synced: 24 days ago
JSON representation

React Renderer for @notionhq/client blocks

• Host: GitHub
• URL: https://github.com/piotrzaborow/notion-blocks-react-renderer
• Owner: piotrzaborow
• License: mit
• Created: 2021-07-19T16:37:02.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-06T17:12:14.000Z (over 1 year ago)
• Last Synced: 2024-10-09T17:46:38.022Z (27 days ago)
• Topics: notion, notion-renderer, react
• Language: TypeScript
• Homepage:
• Size: 716 KB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Notion Blocks React Renderer

React Renderer for [@notionhq/client](https://www.npmjs.com/package/@notionhq/client) blocks

## How to install?

```

npm install notion-blocks-react-renderer

```

or

```

yarn add notion-blocks-react-renderer

```

## How to use Notion Blocks React Renderer?

```

import { blocksToReactComponents } from 'notion-blocks-react-renderer'

const Component = () => {

    const [blocks, setBlocks] = useState([])

    useEffect(() => {

        const blocks = fetchFromNotionAPI()

    },[])

    return <>

        {blocksToReactComponents(blocks)}

    >

}

```

You can add your own renderers (Components) for Notion Blocks by creating new object and passing it to `blocksToReactComponents` function as a second parameter:

```

import { blockToText, blocksToReactComponents, BLOCKS, blockRenderer } from 'notion-blocks-react-renderer'

const renderers = {

    [BLOCKS.PARAGRAPH]: (block) => 
{ blockToText(block) }
,

    [BLOCKS.HEADING1]: (block) => 
{ blockToText(block) }
,

    [BLOCKS.HEADING2]: (block) => 
{ blockToText(block) }
,

    [BLOCKS.HEADING3]: (block) => 
{ blockToText(block) }
,

    [BLOCKS.BULLETEDLISTITEM]: (block) => 
{ blockToText(block) }
,

    [BLOCKS.BULLETEDLIST]: (block) => 
{ block.list.map((listItem) => blockRenderer(listItem, renderers)) }
,

    [BLOCKS.NUMBEREDLISTITEM]: (block) => 
{ blockToText(block) }
,

    [BLOCKS.NUMBEREDLIST]: (block) => 
{ block.list.map((listItem) => blockRenderer(listItem, renderers)) }
,

    [BLOCKS.QUOTE]: (block) => 
{ blockToText(block) }
,

    [BLOCKS.CODE]: (block) => { blockToText(block) },

    [BLOCKS.IMAGE]: (block) => ,

    [BLOCKS.AUDIO]: (block) => 

}


const Component = () => {

    const [blocks, setBlocks] = useState([])

    useEffect(() => {

        const blocks = fetchFromNotionAPI()

    },[])

    return <>

        {blocksToReactComponents(blocks, renderers)}

    >

}

```