react-notion-blocks

A lightweight React component to render Notion-style content blocks.

✨ Features

• Simple and modular rendering of Notion-style blocks
• Supports headings, paragraphs, lists, toggles (expandable content)
• No dependencies beyond React
• Easily customizable for your own Notion-like interface

📦 Installation

1npm install react-notion-blocks

or

1yarn add react-notion-blocks

🚀 Usage

1import React from "react";
2import { NotionRenderer } from "react-notion-blocks";
3
4const content = [
5  { type: "heading_1", text: "Welcome to Notion Blocks" },
6  { type: "paragraph", text: "Here’s a simple renderer for Notion-style blocks." },
7  {
8    type: "bulleted_list",
9    items: [
10      { type: "bulleted_list_item", text: "Modular" },
11      { type: "bulleted_list_item", text: "Composable" }
12    ]
13  },
14  {
15    type: "toggle",
16    text: "Click to reveal more",
17    children: [
18      { type: "paragraph", text: "Hello from the inside!" }
19    ]
20  }
21];
22
23function App() {
24  return <NotionRenderer blocks={content} />;
25}
26
27export default App;

🧱 Supported Block Types

• heading_1, heading_2, heading_3
• paragraph
• bulleted_list, bulleted_list_item
• toggle (with nested children blocks)

🎨 Styling

This package uses basic class names like text-xl, my-2, etc.
It pairs well with Tailwind CSS or your own custom styles.

You can modify the components to fit your own design system.

📄 License

MIT

---

Created with ❤️ by [Your Name]