Package Exports

notion-blocks
notion-blocks/dist/cjs/index.js
notion-blocks/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (notion-blocks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Notion-Blocks

alt text

A React component package to be given the `blocks` from the notion API to render in browser

NPM PACKAGE

LIVE DEMO

Use

import {NotionBlocks} from 'notion-blocks'

export const example = () => {
  const blocks = BLOCKS_FROM_NOTION_API;

  return (
    <NotionBlocks blocks={blocks}>
  )
}

API

Prop	type	Description
blocks	object	list of blocks that can be acquired from Notion's API

Supports

Headers
- Text Color
- Background Color
- Bold
- Italic
- Link
- Code
- Underline
- Strike Through
- Toggle Header
  - Nesting
Paragraph
- Text Color
- Background Color
- Bold
- Italic
- Link
- Code
- Underline
- Strike Through
Code Block
- All Notion Supported Languages
- Syntax Highlighting
- Copy Button on Hover
- Language Label On Hover
- Stylized Captions
  - Text Color
  - Background Color
  - Bold
  - Italic
  - Link
  - Code
  - Underline
  - Strike Through
  - equations
Lists
- Numbered
- Bulleted
- TODO Lists
- Toggle + Nesting
Images
Call Out
Quote
Divider
Mentions
Columns
- 2 columns
- 3 columns
Equations

TODO:

Tables
General Styling/Polishing
- header text sizing needs to be adjusted (h3 too small)
- paragraph line-height needs to be increased, margin-top/bottom should be increased as well
- links should have a hover effect and color should be a nicer looking blue
- inline code color should be an easier to read color
Storybook organization
Additional Props to individually style components
- example: codeStyles = {backgroundColor: "Black"}
Comments
Web Book Mark

Toggles

Due to Notion's API limitations, Toggle Item's content is not provided by querying a page's blocks. Example

const { Client } = require("@notionhq/client");
const notion = new Client({
  auth: process.env.NOTION_KEY,
});

await notion.blocks.children.list({ block_id: postID });

If you would like to include the toggle's content, query the individual parent block ID

const CHILDREN_OF_TOGGLE_BLOCK = await notion.blocks.children.list({
  block_id: TOGGLE_BLOCK_ID,
});

console.log(CHILDREN_OF_TOGGLE_BLOCK);

// {
//   object: 'list',
//   results: [
//     {
//       object: 'block',
//       has_children: false,
//       archived: false,
//       type: 'paragraph',
//       paragraph: [Object]
//     }
//   ],
//   next_cursor: null,
//   has_more: false,
//   type: 'block',
//   block: {}
// }

Once you query the Toggle and get the children, place them in the toggle's block:

  // Toggle Header Object
  {
    "has_children": true,
    "archived": false,
    "type": "heading_1",
    "heading_1": {
        "rich_text": [
            {
                "type": "text",
                "text": {
                    "content": "Toggle H1",
                    "link": null
                },
                "annotations": {
                    "bold": false,
                    "italic": false,
                    "strikethrough": false,
                    "underline": false,
                    "code": false,
                    "color": "default"
                },
                "plain_text": "Toggle H1",
                "href": null
            }
        ],
        "is_toggleable": true,
        "color": "default"
    },
    // Added field for children blocks within toggle field
    "children": [
      {
        "object": 'block',
        "has_children": false,
        "type": 'paragraph',
        "paragraph": [Object]
      },
      {
        "object": 'block',
        "has_children": false,
        "archived": false,
        "type": 'paragraph',
        "paragraph": {
          "color": "default",
          "rich_text": [
              {
                "type": 'text',
                "text": {
                  "content": "foo",
                  "link": null
                },
                "annotations": {
                  "bold": false,
                  "italic": false,
                  "strikethrough": false,
                  "underline": false,
                  "code": false,
                  "color": "default"
                },
                "plain_text": 'simple content',
                "href": null
              },
              ...
            ],
        }
      },
      ...
    ]
  },

2 & 3 Columns

Due to Notion's API limitations, Column Item's content is not provided by querying a page's blocks.

Note: Column Width is not supported. Each Width will be equal.

Example

const { Client } = require("@notionhq/client");
const notion = new Client({
  auth: process.env.NOTION_KEY,
});

await notion.blocks.children.list({ block_id: postID });

If you would like to include the column's content, query the individual parent block ID

const CHILDREN_OF_COLUMN_CONTENT = await notion.blocks.children.list({
  block_id: COLUMN_BLOCK_ID,
});

console.log(CHILDREN_OF_COLUMN_CONTENT);
// {
//   "children": [
//     {
//       "object": "block",
//       "type": "column_list",
//       "column_list": {
//         "children": [
//           {
//             "object": "block",
//             "type": "column",
//             "column": {
//               "children": [
//                 {
//                   "object": "block",
//                   "type": "paragraph",
//                   "paragraph": {
//                     "text": [
//                       {
//                         "type": "text",
//                         "text": {
//                           "content": "some text here"
//                         }
//                       }
//                     ]
//                   }
//                 }
//               ]
//             }
//           },
//           {
//             "object": "block",
//             "type": "column",
//             "column": {
//               "children": [
//                 {
//                   "object": "block",
//                   "type": "paragraph",
//                   "paragraph": {
//                     "text": [
//                       {
//                         "type": "text",
//                         "text": {
//                           "content": "some text here"
//                         }
//                       }
//                     ]
//                   }
//                 }
//               ]
//             }
//           }
//         ]
//       }
//     }
//   ]
// }

Once you have queried the column and have a list of the children within the colum, structure the block as below

{
  "object": "block",
  "id": "abc123",
  "has_children": true,
  "archived": false,
  "type": "column_list",
  "column_list": {},
  "children": [
    {
      "object": "block",
      "type": "column_list",
      "column_list": {
        "children": [
          {
            "object": "block",
            "type": "column",
            "column": {
              "children": [
                {
                  "object": "block",
                  "type": "paragraph",
                  "paragraph": {
                    "text": [
                      {
                        "type": "text",
                        "text": {
                          "content": "some text here"
                        }
                      }
                    ]
                  }
                }
              ]
            }
          },
          {
            "object": "block",
            "type": "column",
            "column": {
              "children": [
                {
                  "object": "block",
                  "type": "paragraph",
                  "paragraph": {
                    "text": [
                      {
                        "type": "text",
                        "text": {
                          "content": "some text here"
                        }
                      }
                    ]
                  }
                }
              ]
            }
          }
        ]
      }
    }
  ]
}

Development

Local Setup + Contributing

This is a work in process that is purposefully written to be easily integrated with Notion's API.

Setup

Install dependencies

yarn

local StoryBook

Live Demo

yarn storybook

Building

yarn rollup