Paragraph Block

The Paragraph block is the most basic block type used to represent plain text.

Data Structure

The Notion API data structure for a Paragraph block is as follows:

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

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

React Component

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

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


type ParagraphProps = {
children?: React.ReactNode;
} & ParagraphArgs;




const Paragraph: React.FC<ParagraphProps> = ({ children, ...props }) => {
const {
paragraph: { color, rich_text: texts },
} = props;




return (
<div className={notion-block notion-paragraph ${getColorCss(color)}}>
<p className="notion-paragraph-content">
<RichText props={texts} />
</p>
{children}
</div>
);
};




export default Paragraph;
export default Paragraph;

Usage Example

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

• .notion-block: Basic style applied to all Notion blocks
• .notion-paragraph: Specific style for Paragraph blocks
• .notion-paragraph-content: Style for the content of the paragraph

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