isabella232 / jsonmltoreact

JsonML to React component converter

jsonmltoreact

JsonML to React converter

Install

$ npm i --save jsonmltoreact

Examples

import _ from 'lodash';
import React from 'react';
import ReactDOMServer from 'react-dom/server';

import JsonmlToReact from './src';

// Some random React component
class CustomCompoenent extends React.Component {
  render() {
    return (
      <div className="container">
        {this.props.header && <h1>{this.props.header}</h1>}
        {this.props.subheader && <h2>{this.props.subheader}</h2>}
        {this.props.children}
      </div>
    );
  }
}

// Create instance with custom converters
let jsonmlToReact = new JsonmlToReact({
  'custom-tag': (props, data) => ({
    type: CustomCompoenent,
    props: _.assign({}, props, data),
  })
});

// JsonML tree
let jsonml = [
  'div', { class: 'container' },
  [
    'custom-tag', { subheader: 'bar' },
    [
      'span', 'content'
    ]
  ]
];

// Optional data to be passed to converters
let data = {
  'header': 'foo',
};

let reactComponent = jsonmlToReact.convert(jsonml, data);

console.log(ReactDOMServer.renderToStaticMarkup(reactComponent));
// <div class="container"><div class="container"><h1>foo</h1><h2>bar</h2><span>content</span></div></div>