Notion to Document Page with React JS in 3 minutes
Tags: webdev, javascript, react, nextjs
Published: 2024-06-30 21:02:58

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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7xnulc41nydi8t5g3e8.png)

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:**
```javascript
yarn dev axios
yarn dev react-notion
```

- [react-notion](https://github.com/splitbee/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:
```javascript
//https://notion-api.splitbee.io/v1/page/ + ID 
//https://notion-api.splitbee.io/v1/page/dbc3de7dc52248c4b293ac9114238d35
```

Response the data in Notion Json format rule:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3etlnsrwzk9nvbw0lnsr.png)


**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](https://github.com/splitbee/react-notion):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvmrr6p02f3gc62tr7sz.png)

Note: We have to import all the needed resource to use [react-notion](https://github.com/splitbee/react-notion) and use NotionRenderer component to render received data. Please read more in [react-notion document](https://github.com/splitbee/react-notion)
```javascript
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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg2o8sp3hxt47s78bshg.png)




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