File tree Expand file tree Collapse file tree 1 file changed +58
-1
lines changed Expand file tree Collapse file tree 1 file changed +58
-1
lines changed Original file line number Diff line number Diff line change 11# react-notion
2- A react renderer that can render Notion.so data
2+
3+ Renders your Notion blocks with ease.
4+
5+ ## Install
6+
7+ ``` bash
8+ npm install react-notion
9+
10+ // if you use code blocks with syntax highlighting
11+ npm install prismjs
12+ ` ` `
13+
14+ # # How to use
15+
16+ ` ` ` js
17+ import { NotionRenderer } from " react-notion" ;
18+ import " react-notion/src/styles.css" ;
19+
20+ import " prismjs/themes/prism-tomorrow.css" ; // only needed if you use Code Blocks
21+ ` ` `
22+
23+ # ## Example
24+
25+ ` ` ` js
26+ const Page = ({ page }) => {
27+ if (! page) return null;
28+
29+ return (
30+ < div className=" notion" style={{ maxWidth: 768, color: " rgb(55, 53, 47)" }}>
31+ < NotionRenderer
32+ level={0}
33+ blockMap={page.blocks || []}
34+ currentID={page.id}
35+ />
36+ < /div>
37+ );
38+ };
39+ export default Page;
40+ ` ` `
41+
42+ # # Currently supported block types:
43+
44+ - [x] Text
45+ - [x] Headings
46+ - [x] Images
47+ - [x] Quotes
48+ - [x] Lists
49+ - [x] Links
50+ - [x] Columns
51+ - [x] iFrames
52+ - [x] Videos
53+ - [x] Divider
54+
55+ Missing
56+
57+ - [ ] Checkboxes
58+
59+ Thanks for the prior of work by ! [samwightt](https://github.com/samwightt) (child rendering algorithm)
You can’t perform that action at this time.
0 commit comments