react-notion
Renders your Notion blocks with ease.
Install
npm install react-notion
// if you use code blocks with syntax highlighting
npm install prismjsHow to use
import { NotionRenderer } from "react-notion";
import "react-notion/src/styles.css";
import "prismjs/themes/prism-tomorrow.css"; // only needed if you use Code BlocksExample
const 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;Currently supported block types:
- Text
- Headings
- Images
- Quotes
- Lists
- Links
- Columns
- iFrames
- Videos
- Divider
Missing
- Checkboxes
Thanks for the prior of work by (child rendering algorithm)
