Heading Block

Heading blocks are used to represent the structure of a document and support three levels (Heading 1, Heading 2, Heading 3).

Data Structure

The Notion API data structure for a Heading block is as follows (example for Heading 1):

{
  "type": "heading_1",
  "heading_1": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a heading",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a heading",
        "href": null
      }
    ],
    "color": "default",
    "is_toggleable": false
  }
}

• type: Can be "heading_1", "heading_2", or "heading_3".
• rich_text: An array containing the content and style information of the heading text.
• color: Specifies the color of the heading.
• is_toggleable: Indicates whether the toggle feature is used.

React Component

The component that renders the Heading block in Notionpresso is as follows:

import React, { useMemo } from "react";
import type { HeadingsProps, HeadingConfig } from "../types";
import { getColorCss } from "../utils";
import RichText from "./internal/rich-text";


const Headings: React.FC<HeadingsProps> = ({ children, type, ...props }) => {
const {
[type]: { color, rich_text: texts, is_toggleable },
} = props;




const { headingTag: HeadingTag, headingClassName } =
useMemo<HeadingConfig>(() => {
switch (type) {
case "heading_2":
return { headingTag: "h2", headingClassName: "notion-h2" };
case "heading_3":
return { headingTag: "h3", headingClassName: "notion-h3" };
default:
return { headingTag: "h1", headingClassName: "notion-h1" };
}
}, [type]);




return (
<div
className={notion-block ${headingClassName} ${getColorCss(color)}}
>
<HeadingTag className={notion-h-content ${headingClassName}-content}>
<RichText props={texts} />
</HeadingTag>
{children}
</div>
);
};




export default Headings;
export default Headings;

Usage Example

Here's an example of how to use the Heading block:

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


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

Here, blocks is an array of block data received from the Notion API.

Styling

The style of the Heading block can be customized through the following CSS classes:

• .notion-block: Basic style applied to all Notion blocks
• .notion-h1, .notion-h2, .notion-h3: Specific styles for each heading level
• .notion-h1-content, .notion-h2-content, .notion-h3-content: Styles for the content of each heading

If additional styling is needed, you can write CSS targeting these classes.

Notes

• As Heading blocks are important elements representing the structure of a document, it's recommended to use appropriate heading levels.
• If the is_toggleable property is true, the heading will have a toggle functionality. In this case, additional logic may be required.