Notion React
Notion React allows you to easily map Notion components to your React projects, while completely maintaining customizability to make the components look and behave however you want.
Installation
Use the following command in the root directory of your React project to install the dependency.
npm i notion-react
Important Notes
This library is based around the data structure of the @notionhq/client package, the block list response structure from this library should be used to map components.
Usage
To create a NotionRenderer
, which is what we use to map React components to Notion blocks, we can use the makeNotionRenderer
function.
You can do this outside the body of the component that will be containing the Notion content.
Then, you can simply pass the components you'd like to map into the convenient, type-safe makeNotionRenderer
function.
import NotionHeading from "@/components/NotionHeading";
import makeNotionRenderer, { NotionAPIBlockList } from "notion-react";
const { NotionRenderer } = makeNotionRenderer({
heading_1: NotionHeading,
});
interface ExampleProps {
blocks: NotionAPIBlockList;
}
const Example: React.FC<ExampleProps> = ({ blocks }) => {
return <NotionRenderer blocks={blocks} />;
};
export default Example;
We will also need to create our type-safe NotionHeading component, which is what we mapped the heading_1
component to.
import { NotionBlockComponent, NotionBlock } from "notion-react";
const NotionHeading: NotionBlockComponent<NotionBlock.HEADING_1> = (
props
) => {
const [text] = props.heading_1.rich_text;
const { plain_text } = text;
return <h1>{plain_text}</h1>;
};
export default NotionHeading;
✨ Bam! Just like that, we have an easy-to-use, type-safe Notion renderer that is FULLY customizable, no default style-overriding shenanigans.
Now every time a heading_1
block appears on the Notion page that the block is originating from, it will appear on our page as the NotionHeading
component we created.