Nast-util-to-react NPM

nast-util-to-react

Render a NAST to JSX.Element or HTML.

Documentation

Usage

npm i nast-util-to-react

Then,

// CommonJS Module style
const { renderToHTML, renderToJSX } = require('nast-util-to-react');
// or ES Module style
import { renderToHTML, renderToJSX } from 'nast-util-to-react';

API Reference

:warning: This is a beta software, where APIs may change in near future!

`renderToHTML(tree)`

Render a tree to HTML. This is just a wrapper that use ReactDOMServer.renderToStaticMarkup() to generate HTML from the return value of renderToJSX().

tree

Type: NAST.Block

@returns

Type: string

A HTML string.

`renderToJSX(tree)`

Render a tree to JSX.Element.

tree

Type: NAST.Block

@returns

Type: JSX.Element

This can be used as a child in a React component, which means it's easier to apply further processing, also it has a small benefit, which is that no dangerouslySetInnerHTML is needed.

Note

Implemented NAST Blocks

Block Capabilities

Block can have color or background color.

Status: See commit 0a51743

Smart color inference based on the following rules.

Status: See commit 0a51743

(I = Block)
If I have a color, I use my color.
If I don't have a color, I ask my parent for it.
If I don't have a parent, then just pretend I have a color.

Smart layout (full width, page width, normal) for some media blocks and embed blocks.
Status: Image has best support, others have different partial support.
Note: Images larger than page width but smaller than full width are unsupported and are displayed as page width.
This feature should be moved to a wrapper block where all blocks can use if needed.
Caption in media blocks and embed blocks.

Inline (SemanticString)

Bold, Italic, Strike, Link, Code, Colored, Commented.
Mention an Individual
Shows the individual's name.
Mention a Resource
Show the resource's name.
Mention a DateTime
Support start_date and end_date.

Basic Blocks

Text
Embedded Page / Link To Page
Gotcha 1: Empty pages and filled pages has the same "filled" icon.
Gotcha 2: Embedded Page and Link To Page looks the same.
Heading (1, 2, 3)
Bulleted List
Numbered List
Toggle List
To-do List
Quote
Divider
Callout

Database Blocks

Table
Gotcha 1: Only property types "Title", "Text", "URL", "Checkbox", "Select", "Multi-select" are correctly supported, other types are treated as "Text".
Gotcha 2: Always wrap text.
Gallery
Gotcha 1: Only property type "Title" is rendered.
Gotcha 2: For "Card Preview" option, only "Page Cover" is supported.
List
Calendar
Board

Media Blocks

Image
Web Bookmark
Video
Audio
Code
File

Embed Blocks

Embed
PDF

Advanced Blocks

Table of Contents
Math Equation
Template Button
Status: The template is directly rendered as children like normal content blocks.
Breadcrumb
Status: Unable to implement in current rendering framework because it does not allow traveling to other pages.