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 'jsonmltoreact';
 
// Some random React component
class CustomCompoenent extends React.Component {
  render() {
    return (
      <div className="customCompoenentContainer">
        {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: { ...props, ...data },
  }),
  'span': props => ({
    props: {
      className: 'foobar'
    }
  })
});
 
// 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="customCompoenentContainer">
    <h1>foo</h1>
    <h2>bar</h2>
    <span class="foobar">content</span>
  </div>
</div>
*/