https://github.com/diffcunha/jsonmltoreact

JsonML to React component converter
https://github.com/diffcunha/jsonmltoreact

jsonml react react-converter

Last synced: about 1 year ago
JSON representation

JsonML to React component converter

• Host: GitHub
• URL: https://github.com/diffcunha/jsonmltoreact
• Owner: diffcunha
• License: mit
• Created: 2016-05-16T20:22:41.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-04-26T21:05:33.000Z (about 8 years ago)
• Last Synced: 2025-04-14T10:18:57.957Z (about 1 year ago)
• Topics: jsonml, react, react-converter
• Language: JavaScript
• Homepage:
• Size: 17.6 KB
• Stars: 9
• Watchers: 0
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Code Climate](https://codeclimate.com/github/diffcunha/jsonmltoreact/badges/gpa.svg)](https://codeclimate.com/github/diffcunha/jsonmltoreact)

[![Test Coverage](https://codeclimate.com/github/diffcunha/jsonmltoreact/badges/coverage.svg)](https://codeclimate.com/github/diffcunha/jsonmltoreact/coverage)

# jsonmltoreact

JsonML to React converter

## Install

```shell

$ npm i --save jsonmltoreact

```

## Examples

```js

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 (

      


        {this.props.header && 
{this.props.header}
}

        {this.props.subheader && 
{this.props.subheader}
}

        {this.props.children}

      

    );

  }

}


// 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));

/*



  


    
foo

    
bar

    content

  



*/

```