Bulleted List Item Block

The Bulleted List Item block is used to create unordered lists. Each item starts with a bullet point.

Data Structure

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

{
  "type": "bulleted_list_item",
  "bulleted_list_item": {
    "rich_text": [
      {
        "type": "text",
        "text": {
          "content": "This is a bulleted list item",
          "link": null
        },
        "annotations": {
          "bold": false,
          "italic": false,
          "strikethrough": false,
          "underline": false,
          "code": false,
          "color": "default"
        },
        "plain_text": "This is a bulleted 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 Bulleted List Item block in Notionpresso is as follows:

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


type BulletedListItemProps = {
children?: React.ReactNode;
} & BulletedListItemArgs;




const BulletedListItem: React.FC<BulletedListItemProps> = ({
children,
...props
}) => {
const {
bulleted_list_item: { rich_text: texts, color },
} = props;
const { marker, format } = bulletedListItemMarker.getMarker(props);




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




export default BulletedListItem;
export default BulletedListItem;

Usage Example

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

• .notion-block: Basic style applied to all Notion blocks
• .notion-list-bulleted: Specific style for Bulleted List Item blocks
• .notion-list-bulleted-content: Style for the content of list items
• .notion-list-marker: Style for bullet points

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

Handling Nested Lists

Bulleted List Items can be nested. Nested lists are handled through the children prop. The shape of the bullet point may change depending on the nesting level, which is handled by the bulletedListItemMarker.getMarker function.

Notes

• When Bulleted 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 shape of the bullet points follows Notion's default style, but can be customized through CSS.