# notion-blocks > Notion blocks react component Latest version **1.6.1** (published 2023-06-01) · ISC license · 0 weekly downloads ## Install ```sh npm install notion-blocks pnpm add notion-blocks yarn add notion-blocks bun add notion-blocks ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.6.1 | | Published | 2023-06-01 | | First published | 2023-04-25 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 1.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3 | | Author | Jason Giroux | | Maintainers | jaysongiroux | | Keywords | react, notion, cms | ## Links - npm: https://www.npmjs.com/package/notion-blocks - Repository: https://github.com/jaysongiroux/notion-blocks - Homepage: https://github.com/jaysongiroux/notion-blocks#readme - Issues: https://github.com/jaysongiroux/notion-blocks/issues - npm.io page: https://npm.io/package/notion-blocks ## Dependencies (6) - [katex](https://npm.io/package/katex.md) ^0.16.7 - [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.6.0 - [@notionhq/client](https://npm.io/package/@notionhq/client.md) ^2.2.5 - [react-animate-height](https://npm.io/package/react-animate-height.md) ^3.1.1 - [@matejmazur/react-katex](https://npm.io/package/@matejmazur/react-katex.md) ^3.1.3 - [react-syntax-highlighter](https://npm.io/package/react-syntax-highlighter.md) ^15.5.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.6.1 (latest) — 2023-06-01 - 1.6.0 — 2023-06-01 - 1.5.0 — 2023-05-30 - 1.4.12 — 2023-05-24 - 1.4.11 — 2023-05-24 - 1.4.10 — 2023-05-23 - 1.4.9 — 2023-05-22 - 1.4.8 — 2023-05-22 - 1.4.7 — 2023-05-21 - 1.4.6 — 2023-05-21 - 1.4.5 — 2023-05-21 - 1.4.4 — 2023-05-21 - 1.4.3 — 2023-05-21 - 1.4.2 — 2023-05-21 - 1.4.1 — 2023-05-02 - … 9 more at https://npm.io/package/notion-blocks/versions ## README # Notion-Blocks
![alt text](https://github.com/jaysongiroux/notion-blocks/blob/master/assets/notionBlocks-white-bg.png?raw=true) [![semantic-release: React](https://img.shields.io/badge/semantic--release-react-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release) ![Main Workflow](https://github.com/jaysongiroux/notion-blocks/actions/workflows/main.yml/badge.svg) [![npm version](https://badge.fury.io/js/notion-blocks.svg)](https://badge.fury.io/js/notion-blocks) [![Badge](https://202o2716cl9w.runkit.sh)](http://notion-blocks.jasongiroux.com)
A React component package to be given the `blocks` from the notion API to render in browser [NPM PACKAGE](https://www.npmjs.com/package/notion-blocks) [LIVE DEMO](http://notion-blocks.jasongiroux.com) ## Use ### NotionBlocks ```js import {NotionBlocks} from 'notion-blocks' import 'notion-blocks/dist/styles/katex.css' export const example = () => { const blocks = BLOCKS_FROM_NOTION_API; return ( ) } ``` ### FetchNotionBlocks ```js import { FetchNotionBlocks } from 'notion-blocks'; const { cover, response, blocks } = await FetchNotionBlocks({ notionkey: process.env.NOTION_KEY, notionPageId: PAGE_ID, }); ``` ## API ### NotionBlocks | Prop | type | Description | | ------------------ | -------- | -------------------------------------------------------------------------------------------------------- | | blocks | object | list of blocks that can be acquired from Notion's API | | codeTheme | string | `light` or `dark` | | containerStyle | object | Object to style container where blocks are rendered | | codeOverlay | boolean | To Show overlay in code block that allows users to copy code, and see the language within the code block | | headerStyles | object | Style overrides for headers, These overrides do not include toggle headers | | toggleHeaderStyles | object | Style overrides for toggle headers. These styles do not include the content within the headers | | toggleStyles | object | Style overrides for toggle lists. These styles do not include the content within the headers | | codeStyles | object | styles placed onto the code block container. | | pictureStyles | object | styles for pictures | | calloutStyles | object | styles for callout container | | quoteStyles | object | styles for quote container | | listStyles | object | styles for individual block container | | columnStyles | object | styles for column container | | bookmarkStyles | object | styles for bookmark container | | equationStyles | object | styles for Equation container | | childPageStyles | object | styles for child page container | | tableStyle | object | styles for table container | | tableRowStyle | object | styles for all table rows except headers | | tableHeaderStyle | object | styles for table headers row and columns | | onChildPageClick | function | function to be called if user clicks on child page block. `(id, title) => console.log(id, title)` | ### FetchNotionBlocks Function to only be used on the backend where secrets are not exposed to the client | prop | type | description | | ------------ | ------ | ------------------------------ | | notionKey | string | notion secret key | | notionPageId | string | ID of page you'd like to fetch | ## Not Supported - link to page (not to be confused with child page or embedded pages which are supported) # Development ## Local Setup ### Setup Install dependencies ```bash yarn ``` ### local StoryBook ```bash yarn storybook ``` ### Building ```bash yarn rollup ``` --- _Source: https://npm.io/package/notion-blocks · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._