Notion-To_React
The notion-to-react library is a tool that allows you to seamlessly integrate data from the Notion API into your React applications.
Usage
import NotionPost from './lib/NotionPost';
const blocks = {
"object": "list",
"results": [], //Notion Api https://developers.notion.com/
"next_cursor": null,
"has_more": false,
"type": "block",
"block": {},
"developer_survey": "https://notionup.typeform.com/to/bllBsoI4?utm_source=postman"
}
const tables = {
"faac729b-37ad-43d4-a3df-ed9d58412e90":{ //Table Block ID
//Table Block Json
"object": "list",
"results": [],
"next_cursor": null,
"has_more": false,
"type": "block",
"block": {},
"developer_survey": "https://notionup.typeform.com/to/bllBsoI4?utm_source=postman"
}
}
function App() {
return (
<div className="App">
<NotionPost blocks={blocks} tables={tables} />
</div>
);
}Option
If you want to use the table, use the tables option
const tables = {
"faac729b-37ad-43d4-a3df-ed9d58412e90":{ //Table Block ID
//Table Block Json
"object": "list",
"results": [],
"next_cursor": null,
"has_more": false,
"type": "block",
"block": {},
"developer_survey": "https://notionup.typeform.com/to/bllBsoI4?utm_source=postman"
}
}
function App() {
return (
<div className="App">
<NotionPost blocks={blocks} tables={tables} />
</div>
);
}Supported Blocks
The majority of Notion blocks and collection views are fully supported.
| Block Type | Supported | Notes |
|---|---|---|
| Bookmark | Replaced by Link | |
| Bulleted List | ||
| Callout | ||
| Code | ||
| Divider | ||
| Equation | ||
| Heading 1 | ||
| Heading 2 | ||
| Heading 3 | ||
| Image | ||
| Numbered List Item | Replaced by Bulleted List | |
| Paragraph | react-katex | |
| Quote | ||
| Table | ||
| To Do | ||
| Video | ||
| Toggle | ||
| Sync | ||
| Column |