Notion to JSX

A super fast plugin that converts your notion page to corresponding JSX with customizable styles. Types are included.

Installation

1npm install notion-jsx

Usage

Fetching your Notion page

Each notion page is made of multiple blocks, therefore in order to retrieve the blocks of a page, you will need your Notion page's id. You can copy the page id from the page's link.

For example:

If your Notion page's link is, https://www.notion.so/myworkspace/How-to-Use-Notion-as-a-CMS-767de912c4c942509a7956d54ef0db7a

Then the page id would be, 767de912c4c942509a7956d54ef0db7a

Please refer to Notion's official documentation to know how you use their APIs or JavaScript SDK.

If you are using the Notion JavaScript SDK, you would be doing something like this:

1/**
2 * A sample function to get blocks using the Notion JavaScript SDK
3 * */
4const getBlocks = () => {
5  const blocks = await Promise.all(
6    pageIds.map((page_id: string) =>
7      notion.blocks.children.list({
8        block_id: page_id,
9      })
10    )
11  );
12
13  return blocks;
14};

Using notionJSX to parse the blocks to JSX

You can pass blocks directly to the generateJSX() function on notionJSX.

1import notionJSX from 'notion-jsx';
2
3const MyComponent = () => {
4  const blocks = getBlocks();
5  const elements = notionJSX.generateJSX(blocks) as ReactElement[];
6
7  return (
8    <div className="my-class">
9      {elements?.map((element: ReactElement, index: number) => {
10        return React.createElement(
11          element.type,
12          {
13            key: element.key || index,
14            className: element.props.className,
15            ...element.props,
16          },
17          element.props.children
18        );
19      })}
20    </div>
21  );
22};

Supported Notion blocks

** The following Notion blocks are currently supported:**

• heading_1
• heading_2
• heading_3
• paragraph
• bulleted_list_item
• quote
• to_do
• code
• divider
• image

Passing custom styles

You can pass custom styles for each supported element. If you don't pass your own styles, the default styles will be applied.

1const options = {
2  styles: {
3    heading_1: { color: 'blue' },
4    heading_2: { textDecoration: 'underline' },
5  },
6};
7const elements = notionJSX.generateJSX(blocks, options) as ReactElement[];

Rendering generated JSX on the DOM

To generate JSX, you can use the generateJSX function and pass the blocks and options as arguments

1<div className="my-class">
2  {elements?.map((element: ReactElement, index: number) => {
3    return React.createElement(
4      element.type,
5      {
6        key: element.key || index,
7        className: element.props.className,
8        ...element.props,
9      },
10      element.props.children
11    );
12  })}
13</div>

Contributing

NotionJSX is completely free and open source, please feel free to contribute if you like what we are doing.

How to contribute?

1. Fork the repository

Click on the "Fork" button at the top right corner of this repository. This will create a copy of the project in your GitHub account.

2. Clone the Repository:

Clone the forked repository to your local machine using the git clone command.

1git clone https://github.com/your-username/notion-jsx.git

3. Create a Branch:

Create a new branch for your contribution.

1git checkout -b feature/new-feature

4. Make Changes:

Make your desired changes and improvements to the codebase.

5. Commit Changes:

Commit your changes with a descriptive commit message.

1git commit -m "feat: your feature description"

6. Push Changes:

Push your changes to your forked repository.

1git push origin feature/new-feature

7. Submit a Pull Request:

Open a pull request from your forked repository to the main repository.

Issues and Feature Requests

If you encounter issues or have ideas for new features, feel free to open an issue on the issue tracker.

Thank you for making NotionJSX even better! ❤️