This package is for core rendering of components such as paragraph, text or link. Consumers provide an Abstract Syntax Tree (AST) to the traversal functions from markup-forest, which iterates over and renders with the given renderer functions. This packages provides those core renderers.

• bold
• block
• break
• emphasis
• inline
• italic
• paragraph
• strong
• text

This package should only have core renderers with no dependencies beyond React. If a consumer would like to support more complex elements they'll need to provide renderers for them.

Please read CONTRIBUTING.md before contributing to this package

Please see our main README.md to get the project running locally

The code can be formatted and linted in accordance with the agreed standards.

yarn fmt
yarn lint

Testing can be done by running:

yarn test:web

Visit the official storybook to see our available markup templates.

import { renderTrees } from "@times-components/markup-forest";
import coreRenderers from "@times-components/markup";

const data = [
  {
    name: "inline",
    attributes: {},
    children: [
      {
        name: "text",
        attributes: {
          value: "Some text value here"
        },
        children: []
      }
    ]
  }
];

renderTrees(data, coreRenderers);

/*
web

<span>
  Some text value here
</span>
*/