Numbered List Item Block

The Numbered List Item block is used to create ordered lists. Each item starts with a sequential number.

Data Structure

The Notion API data structure for a Numbered List Item block is as follows:

{
  "type": "numbered_list_item",
  "numbered_list_item": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a numbered list item",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a numbered list item",
        "href": null
      }
    ],
    "color": "default"
  }
}

• rich_text: An array containing the text content and style information of the list item.
• color: Specifies the color of the text.

React Component

The component that renders the Numbered List Item block in Notionpresso is as follows:

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


type NumberedListProps = {
children?: React.ReactNode;
} & NumberedListItemArgs;




const NumberedListItem: React.FC<NumberedListProps> = ({
children,
...props
}) => {
const {
numbered_list_item: { rich_text: texts, color },
} = props;
const { marker, format } = numberedListItemMarker.getMarker(props);




return (
<ol
data-notion-marker-format={format}
className={notion-block notion-list-numbered ${getColorCss(color)}}
>
<li className="notion-display-contents">
<div className="notion-list-numbered-content">
<span
data-notion-marker-format={format}
className="notion-list-marker"
>
{marker}
</span>
<p>
<RichText props={texts} />
</p>
</div>
{children}
</li>
</ol>
);
};




export default NumberedListItem;
export default NumberedListItem;

Usage Example

Here's an example of how to use the Numbered List Item 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 Numbered List Item block can be customized through the following CSS classes:

• .notion-block: Basic style applied to all Notion blocks
• .notion-list-numbered: Specific style for Numbered List Item blocks
• .notion-list-numbered-content: Style for the content of list items
• .notion-list-marker: Style for numbers

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

Numbering System

The numbering system for Numbered List Items is determined by the numberedListItemMarker.getMarker function. This function returns an appropriate number or character considering the current item's position and nesting level. By default, it follows this order:

1. Top level: 1, 2, 3, ...
2. Second level: a, b, c, ...
3. Third level: i, ii, iii, ...

This order can be customized as needed.

Handling Nested Lists

Numbered List Items can also be nested. Nested lists are handled through the children prop. The numbering system may change depending on the nesting level, which is handled by the numberedListItemMarker.getMarker function.

Notes

• When Numbered List Item blocks are used consecutively, they are automatically grouped into a single list.
• When using nested lists, it's good to clearly express the hierarchical structure through appropriate indentation.
• The numbering system follows Notion's default style, but can be customized through CSS.
• If a list is interrupted and then resumed, the numbering may start over, so care should be taken.