Options
All
  • Public
  • Public/Protected
  • All
Menu

jsonx

JSONX

Coverage Status Build, Test & Coverage

Description

JSONX is a module that creates React Elements, JSX and HTML from JSON.

Zero Setup

The JSONX UMD comes with batteries included so you can use JSONX in browser without transpilers or any additional setup/configuration. The JSONX UMD is ideal for JAMstack Applications.

Embeddable

JSONX can also be used in existing react applications if you want to dynamically create elements with JSON. This works great for many scenarios when you want to manage your application views and components in a view management system or if you want to dynamically create React elements without using JSX.

Fully Featured

JSONX supports all of Reacts features including Functional (with Hooks), Class-based, Suspense and Lazy components. JSONX supports JSON objects that implement the JXM (JSONX Markup) Spec.

Installation

$ npm i jsonx

Full Documentation


JSONX Manual


Basic Usage

import { default as jsonx } from 'jsonx';
const exampleJSONX = {
  component:'p',
  props:{style:{color:'blue'}},
  children:'hello world'
};
//Rendering React Components
jsonx.getReactElement(exampleJSONX);
// => JSX Equivalent: <p style={{color:'blue'}}>hello world</p>

const exampleToHTMLandJSX = {
  component: 'div',
  props:{  className:'jsonx-generated', },
  children:[
    {  
      component:'p',
      props:{ style:{ color:'red', }, },
      children:'hello world',
    }
  ]
};
//Generating HTML strings
jsonx.outputHTML({ jsonx: exampleToHTMLandJSX, });
// => '<div class="jsonx-generated"><p style="color:red;">hello world</p></div>'
//Generating JSX strings
jsonx.outputJSX({ jsonx: exampleToHTMLandJSX, });
// => '<div class="jsonx-generated"><p style={{color:red,}}>hello world</p></div>'

//Rendering HTML Dom with React
jsonx.jsonxRender({ jsonx: { component: 'div', props:{className:'jsonx-generated',children:[{ component:'p',props:{style:{color:'red'}}, children:'hello world' }]}}, querySelector:'#myApp', });
// <!DOCTYPE html>
//  <body>
//    <div id="myApp">
//      <div class="jsonx-generated">
//        <p style="color:red;">hello world</p>
//      </div>
//    </div>
// </body>

JXM JSON Spec

JSONX works by using JXM JSON to create react elements. JXM JSON Objects are valid JSON Objects that more or less mimics JSX in JSON notation with a couple of special properties. The properties for JSONX JSON are the arguments passed to React.createElement. The only required property is the component (which is passed as the type argument)

React.createElement(
  type,
  [props],
  [...children]
)

You can pass React component libraries for additional components, or you own custom components (see External and Custom Components and Using Advanced Props for more details).

Development

Note Make sure you have typescript installed

$ npm i -g typescript 

For generating documentation

$ npm run doc

Notes

Check out https://repetere.github.io/jsonx/ for the full jsonx Documentation

Testing

$ npm test

Contributing

Fork, write tests and create a pull request!

License


MIT