jsonml-to-react-element

1.1.11 • Public • Published

jsonml-to-react-element

npm package NPM downloads Dependency Status

To convert JsonML to React Component.

Installation

npm install --save jsonml-to-react-element

Usage

Basic:

const ReactDOM = require('react-dom');
const toReactElement = require('jsonml-to-react-element');
 
const title = [
  'h1',
  'Hello world!',
];
 
ReactDOM.render(toReactElement(title), document.getElementById('content'));

With converters:

const React = require('react');
const ReactDOM = require('react-dom');
const toReactElement = require('jsonml-to-react-element');
 
const website = [
  'section',
  [
    'header',
    ...
  ],
  [
    'article',
    [
      'h1',
      'Hello world!',
    ],
  ],
  [
    'footer',
    ...
  ]
];
 
const html5to4 = [
  [
    (node) => ['section', 'header', 'article', 'footer'].indexOf(node[0]) > -1,
    (node, index) => React.createElement(
      'div',
      { key: index },
      node.slice(1).map((child) => toReactElement(child, html5to4))
    )
  ],
  ...
];
 
ReactDOM.render(
  toReactElement(website, html5to4),
  document.getElementById('content')
);

API

toReactElement(jsonml: Object [, converters: Array]): React.Component

To convert JsonML to React Component with converters.

converters: Array[Pair[Function, Function]]

Converters which are passed to toReactElement will concat with default converters. It works like switch sentence.

Each item in converters is a pair of functions. The first function is a prediction, and the second function is a processor which take JsonML node and return React Component.

Relative

jsonml.js A collection of JsonML tools.

Liscence

MIT

/jsonml-to-react-element/

    Package Sidebar

    Install

    npm i jsonml-to-react-element

    Weekly Downloads

    2,879

    Version

    1.1.11

    License

    MIT

    Unpacked Size

    21.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • benjycui