Notion to Document Page with React JS in 3 minutes

The "Document Page" is commonly used on many websites today for various purposes such as tutorials, news, policies, and more. The challenge in coding document pages is that front-end developers often have to handle a large amount of simple text and repetitive code. Additionally, these documents come in a wide variety of formats. On some simple websites, when a document needs to be updated, the front-end developer has to modify the code manually, which is not efficient.

We can solve the problem by using Notion. Notion is an all-in-one workspace tool which supports text documents. The simple idea is to fetch content from a public Notion page and display it on our React page. When a document needs to be updated, we can make the changes in Notion, and our React Page will automatically sync with the public Notion page.

For example, we have an exchange policy page in Vietnamese stored on Notion.

1. Switch the page to public and extract its ID on URL.

Switch to public:

Extract ID from URL: the ID is located at the end of the URL

https://juun-cheerful.notion.site/Ch-nh-s-ch-ho-n-tr-ti-n-dbc3de7dc52248c4b293ac9114238d35
=> ID: dbc3de7dc52248c4b293ac9114238d35
https://juun-cheerful.notion.site/H-ng-d-n-mua-h-ng-Beanhop-df2d076768b64bc0aab8f037eca27307
=> ID: df2d076768b64bc0aab8f037eca27307

2. Install essential react libraries:

yarn dev axios
yarn dev react-notion

• react-notion is used to render content from Notion Json format rule.
• axios is used to fetch data from URLs.

Splitbee: It is not a react library, it takes the ID of the Notion page as a URL path and responds with the data in the Notion JSON format rule.

Take the ID of the notion page as an URL Path:

//https://notion-api.splitbee.io/v1/page/ + ID 
//https://notion-api.splitbee.io/v1/page/dbc3de7dc52248c4b293ac9114238d35

Response the data in Notion Json format rule:

3. Coding

The basic concept is that we will fetch data from Splitbee and ID of noion page combination and display the content via react-notion:

Note: We have to import all the needed resource to use react-notion and use NotionRenderer component to render received data. Please read more in react-notion document

import "react-notion/src/styles.css";
import "prismjs/themes/prism-tomorrow.css"; // only needed for code highlighting
import { NotionRenderer } from "react-notion";

4. Result and Live Demo

1. Website demo: https://www.beanhop.vn/chinh-sach-hoan-tien-beanhop
2. Origin notion: https://calico-harmonica-575.notion.site/Ch-nh-s-ch-ho-n-tr-ti-n-dbc3de7dc52248c4b293ac9114238d35

Finally, I hope it will be helpful to you. If you have some questions, just comment below.