Package Exports

notion-blocks
notion-blocks/dist/cjs/index.js
notion-blocks/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (notion-blocks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Notion-Blocks

alt text

A React component package to be given the `blocks` from the notion API to render in browser

NPM PACKAGE

LIVE DEMO

Use

import {NotionBlocks} from 'notion-blocks'

export const example = () => {
  const blocks = BLOCKS_FROM_NOTION_API;

  return (
    <NotionBlocks blocks={blocks}>
  )
}

API

Prop	type	Description
blocks	object	list of blocks that can be acquired from Notion's API

Supports

Headers
- Text Color
- Background Color
- Bold
- Italic
- Link
- Code
- Underline
- Strike Through
Paragraph
- Text Color
- Background Color
- Bold
- Italic
- Link
- Code
- Underline
- Strike Through
Code Block
- All Notion Supported Languages
- Syntax Highlighting
- Copy Button on Hover
- Language Label On Hover
- Stylized Captions
  - Text Color
  - Background Color
  - Bold
  - Italic
  - Link
  - Code
  - Underline
  - Strike Through

TODO:

Lists
- Bulleted
- Numbered
- TODO Lists
- Toggle
Headers
- Toggle Header
Toggle
Call Out
Quote
Images
Tables
Component Nesting (Ex. Toggle inside a toggle)
General Styling/Polishing
Storybook organization
Exporting all components
Additional Props to individually style components
- example: codeStyles = {backgroundColor: "Black"}

Local Setup + Contributing

This is a work in process that is purposefully written to be easily integrated with Notion's API.

Setup

Install dependencies

yarn

local StoryBook

Live Demo

yarn storybook

Building

yarn rollup