Renders your Notion blocks with ease.
npm install react-notion // if you use code blocks with syntax highlighting npm install prismjsimport { NotionRenderer } from "react-notion"; import "react-notion/src/styles.css"; import "prismjs/themes/prism-tomorrow.css"; // only needed if you use Code Blocksconst Page = ({ page }) => { if (!page) return null; return ( <div className="notion" style={{ maxWidth: 768, color: "rgb(55, 53, 47)" }}> <NotionRenderer level={0} blockMap={page.blocks || []} currentID={page.id} /> </div> ); }; export default Page;- Text
- Headings
- Images
- Quotes
- Lists
- Links
- Columns
- iFrames
- Videos
- Divider
Missing
- Checkboxes
Thanks for the prior of work by (child rendering algorithm)