Introduction to Block Type Guide

Notionpresso supports various block types from Notion, providing components that closely resemble Notion's style for each block type. This guide explains the currently supported block types, the Props for each block type, customization methods, and internal working principles.

Supported Block Types

Here's a list of block types currently supported and planned for support in Notionpresso:

Block Type	Support Status	Block Type Enum
Paragraph	✅ Yes	paragraph
Heading 1	✅ Yes	heading_1
Heading 2	✅ Yes	heading_2
Heading 3	✅ Yes	heading_3
Bulleted List Item	✅ Yes	bulleted_list_item
Numbered List Item	✅ Yes	numbered_list_item
To-do	❌ No	to_do
Toggle	✅ Yes	toggle
Quote	✅ Yes	quote
Callout	✅ Yes	callout
Equation	❌ No	equation
Code	❌ No	code
Image	❌ No	image
Video	❌ No	video
Bookmark	❌ No	bookmark
Divider	✅ Yes	divider
Table	❌ No	table
Table Row	❌ No	table_row
Column	❌ No	column
Column List	❌ No	column_list
Audio	❌ No	audio
Synced Block	❌ No	synced_block
Table Of Contents	❌ No	table_of_contents
Embed	❌ No	embed
Figma	❌ No	figma
Google Maps	❌ No	maps
Google Drive	❌ No	drive
Tweet	❌ No	tweet
PDF	❌ No	pdf
File	❌ No	file
Link	❌ No	text (inline)
Page Link	❌ No	page
External Page Link	❌ No	text (inline)
Collections	❌ No	-
Collection View	❌ No	collection_view
Collection View Table	❌ No	collection_view
Collection View Gallery	❌ No	collection_view
Collection View Board	❌ No	collection_view
Collection View List	❌ No	collection_view
Collection View Calendar	❌ No	collection_view
Collection View Page	❌ No	collection_view_page

This list will be continuously updated, and we plan to support more block types in the future.

Using Props

Notionpresso provides Props types for each block type. These Props types can be imported directly from the library for use.

For example, the Props for the Paragraph component can be imported and used as follows:

import { ParagraphProps } from "@notionpresso/react";


// Structure of ParagraphProps
interface ParagraphProps {
type: "paragraph";
paragraph: {
rich_text: Array<RichTextItemResponse>;
color: string;
};
id: string;
has_children?: boolean;
}




// Usage example
const MyParagraph: React.FC<ParagraphProps> = (props) => {
// Custom implementation
};
// Usage example
const MyParagraph: React.FC<ParagraphProps> = (props) => {
// Custom implementation
};

Detailed structures of Props for each block type can be found in the respective block type documentation.

Applying Custom Components

One of the major advantages of Notionpresso is the ability to completely replace each block type with custom components. Here's how to apply custom components:

import { Notion } from "@notionpresso/react";
import CustomParagraph from "./CustomParagraph";
import CustomHeading from "./CustomHeading";


const customComponents = {
paragraph: CustomParagraph,
heading_1: CustomHeading,
heading_2: CustomHeading,
heading_3: CustomHeading,
// ... custom components for other block types
};




function MyNotionPage({ blocks }) {
return (
<Notion custom={customComponents}>
<Notion.Blocks blocks={blocks} />
</Notion>
);
}
function MyNotionPage({ blocks }) {
return (
<Notion custom={customComponents}>
<Notion.Blocks blocks={blocks} />
</Notion>
);
}

The type of components injected into the Notion component is as follows:

type NotionComponents = Record<string, React.ComponentType<any>>;

Here, key is the type of Notion block (e.g., 'paragraph', 'heading_1', etc.), and value is the React component that will render that type.

Data Preprocessing

Notionpresso preprocesses block data fetched from the Notion API into a form optimized for UI rendering. In this process, it defines and uses a new type called ContextedBlock.

+----------------------+
|    Notion API        |
|    Block Data        |
| +------------------+ |
| | Block            | |
| | - id             | |
| | - type           | |
| | - has_children   | |
| | - [type_specific]| |
| +------------------+ |
+----------------------+
           |
           | (Input)
           v
+---------------------------+
| resolveToContextedBlocks  |
| +-------------------------+
| | For each block:         |
| | +---------------------+ |
| | |resolveToContextedBlo| |
| | |ck (recursive)       | |
| | +---------------------+ |
| |   |                     |
| |   v                     |
| | Map parent-child        |
| | relationships           |
| +-------------------------+
|   |
|   v
| Map sibling relationships |
+---------------------------+
           |
           | (Output)
           v
+---------------------------+
|     ContextedBlocks       |
| +-------------------------+
| | ContextedBlock          |
| | - ...Block properties   |
| | - context:              |
| |   - previous (sibling)  |
| |   - next (sibling)      |
| |   - parent              |
| | - blocks (children)     |
| +-------------------------+
+---------------------------+
           |
           | (Used by)
           v
    +----------------+
    | Notion.Blocks  |
    | Component      |
    +----------------+

ContextedBlock extends the existing Block type to include the following additional information:

• Previous block (sibling relationship)
• Next block (sibling relationship)
• Parent block

This additional information can be useful in specific block components.

Rendering Process

The rendering process of Notionpresso is as follows:

+-------------------+      +------------------+
|   Custom          |      |   Default        |
|   Components      |      |   Components     |
+-------------------+      +------------------+
          |                         |
          |   +-----------------+   |
          +-->|     Notion      |<--+
              |    Component    |
              |(React.Provider) |
              +-----------------+
                    |     |
         +----------+     +------------+
         |                             |
+----------------+             +----------------+
| Notion.Cover   |             | Notion.Body    |
+----------------+             +----------------+
                                       |
                               +----------------+
                               | Notion.Title   |
                               +----------------+
                                       |
                               +----------------+
                               | Notion.Blocks  |
                               +----------------+
                                       |
                                       v
                               +----------------+
                               | Rendered       |
                               | Notion Page    |
                               +----------------+

Through this process, custom components and default components work together to render the Notion page.

Styling

The currently provided Notion components are implemented to closely resemble Notion's style. Each component is styled using CSS classes with the notion- prefix.

Future Plans

• Add support for more block types
• Develop component sets with applied themes
• Expand advanced customization options

In the following pages, you can find detailed descriptions, Props structures, usage examples, and customization options for each block type.