@udus/notion-renderer v1.0.0-alpha.83

Notion Renderer

A fully customizable React renderer for the official Notion API.

!NOTE Please note that this package is currently in alpha release.
Therefore, there may be significant changes to the API without prior notice.

Example

• Storybook: https://udus122.github.io/notion-renderer/?path=/docs/renderer--docs

Installation

npm install @udus/notion-renderer@alpha

Usage

Quick Start

First, fetch the blocks of the page you want to render using fetchBlockList.
Next, pass the fetched block list to the BlockRenderer.

If you are using Next.js, you can do it as shown in the sample code below.

import { BlockRenderer } from "@udus/notion-components/components";
import { fetchBlockList } from "@udus/notion-components/libs";

import type { InferGetStaticPropsType, NextPage } from "next";

export const getStaticProps = async () => {
  const blocks = await fetchBlockList("YOUR_PAGE_ID");

  return {
    props: {
      blocks,
    },
  };
};

type Props = InferGetStaticPropsType<typeof getStaticProps>;

const Index: NextPage<Props> = ({ blocks }) => {
  return <BlockRenderer blocks={blocks} />;
};

export default Index;

And you will need to import CSS styles like below.

// Load the CSS to be used with the Notion Renderer.
import "@udus/notion-components/styles/globals.css";
// Load the CSS used for rendering equations
import "katex/dist/katex.min.css";

Please set your Notion integration token as an environment variable named NOTION_TOKEN.

.env
NOTION_TOKEN=secret_epO17gyx***********************************

Custom Component

You can render the page using a custom component instead of the default components, you can also create and use your own components. Please see the example of creating custom components at the following link: https://github.com/udus122/notion-renderer/tree/alpha/src/components/Blocks/Custom

export default () => (
  <BlockRenderer
    blocks={blocks}
    blockMapper={
      toggle: OpenedToggle,
      heading_1: OpenedHeading1,
      heading_2: OpenedHeading2,
      heading_3: OpenedHeading3,
    } />
)

Color

If you want to use dark mode, please set the theme to theme="dark" as follows.(theme="light" is default.)

export default () => (
  <BlockRenderer blocks={blocks} theme="dark" />
)

If you want to change the color theme, please overwrite the CSS variables set to .notion-light or .notion-dark as follows. The default values are listed below.

.notion-light {
  --color-text-default: #37352f;
  --color-bg-default: #fff;
  --color-pill-default: rgb(206 205 202 / 50%);
  --color-text-gray: #9b9a97;
  --color-bg-gray: #ebeced;
  --color-pill-gray: rgb(155 154 151 / 40%);
  --color-text-brown: #64473a;
  --color-bg-brown: #e9e5e3;
  --color-pill-brown: rgb(140 46 0 / 20%);
  --color-text-orange: #d9730d;
  --color-bg-orange: #faebdd;
  --color-pill-orange: rgb(245 93 0 / 20%);
  --color-text-yellow: #dfab01;
  --color-bg-yellow: #fbf3db;
  --color-pill-yellow: rgb(233 168 0 / 20%);
  --color-text-green: #0f7b6c;
  --color-bg-green: #ddedea;
  --color-pill-green: rgb(0 135 107 / 20%);
  --color-text-blue: #0b6e99;
  --color-bg-blue: #ddebf1;
  --color-pill-blue: rgb(0 120 223 / 20%);
  --color-text-purple: #6940a5;
  --color-bg-purple: #eae4f2;
  --color-pill-purple: rgb(103 36 222 / 20%);
  --color-text-pink: #ad1a72;
  --color-bg-pink: #f4dfeb;
  --color-pill-pink: rgb(221 0 129 / 20%);
  --color-text-red: #e03e3e;
  --color-bg-red: #fbe4e4;
  --color-pill-red: rgb(255 0 26 / 20%);
}

.notion-dark {
  --color-text-default: rgb(255 255 255 / 90%);
  --color-bg-default: #2f3437;
  --color-pill-default: rgb(206 205 202 / 50%);
  --color-text-gray: rgb(151 154 155 / 95%);
  --color-bg-gray: #454b4e;
  --color-pill-gray: rgb(151 154 155 / 50%);
  --color-text-brown: #937264;
  --color-bg-brown: #434040;
  --color-pill-brown: rgb(147 114 100 / 50%);
  --color-text-orange: #ffa344;
  --color-bg-orange: #594a3a;
  --color-pill-orange: rgb(255 163 68 / 50%);
  --color-text-yellow: #ffdc49;
  --color-bg-yellow: #59563b;
  --color-pill-yellow: rgb(255 220 73 / 50%);
  --color-text-green: #4dab9a;
  --color-bg-green: #354c4b;
  --color-pill-green: rgb(77 171 154 / 50%);
  --color-text-blue: #529cca;
  --color-bg-blue: #364954;
  --color-pill-blue: rgb(82 156 202 / 50%);
  --color-text-purple: #9a6dd7;
  --color-bg-purple: #443f57;
  --color-pill-purple: rgb(154 109 215 / 50%);
  --color-text-pink: #e255a1;
  --color-bg-pink: #533b4c;
  --color-pill-pink: rgb(226 85 161 / 50%);
  --color-text-red: #ff7369;
  --color-bg-red: #594141;
  --color-pill-red: rgb(255 115 105 / 50%);
}

Supported Objects

Block

Most common block types are supported.

Rich text

Annotation

Page

comming soon.

Database

comming soon.

Contributing

Pull requests are welcome.

License

MIT