JSONX Manual

External Libraries and Components

JSONX natively supports any components from React-DOM, but for most real applications you are using either a large open-source component library (e.g. react-bootstrap, ant.design, material UI, etc) or any 3rd-party react components (like react-autocomplete). To use custom 3rd-party components or libraries they need to be assigned to JSONX’s this parameter.

Using custom Component Libraries

Using a component library is as simple as assigning the Library to the this.componentLibraries property, and referencing the flattened component name as the component value in your JXM JSON Object.

import * as jsonx from 'jsonx';
import { * as ReactBootstrap } from 'react-bootstrap'; //or in the browser reference the UMD: <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin />

const getReactElement = jsonx.getReactElement.bind({
  componentLibraries:{
    ReactBootstrap,
  }
});

const JXM = {
  component:'ReactBootstrap.Container', 
  children:[
    {
      component:'ReactBootstrap.Row', 
      children:[
        {
          component:'ReactBootstrap.Col',
          children:[
            {
              component:'ReactBootstrap.Alert',
              props:{ variant:'primary' },
              children: 'This is a Bootstrap Alert'
            }
          ]
        },
        {
          component:'ReactBootstrap.Col',
          children:[
            {
              component:'ReactBootstrap.Spinner',
              props:{ animation:'border', role:'status' },
            }
          ]
        }
      ], 
    }
  ], 
}

const myReactElements = getReactElement(JXM);

Example React Bootstrap

Using Custom Components

If you’re only adding single components or using your components you can add them to JSONX’s component my individually. The difference between a Custom Component and a Custom Library is this.reactComponents expects each property value to be a react component and this.componentLibraries expects each property value to reference an object that has values that are React Components.

import React from 'react';
import * as jsonx from 'jsonx';
import { Calendar } from 'rc-calendar';
const jsonxRender = jsonx.jsonxRender.bind({ 
  reactComponents:{
    ReactCalendar: Calendar,
  }
});

const JXM = {
  component:'div', 
  children:[
    {
      component:'h1', 
      children:'React Calendar demo',
    },
    {
      component:'ReactCalendar',
      props:{
      },
    }
  ], 
};

jsonxRender({
  jsonx:JXM, 
  querySelector:'#main',
});

Example React Calendar

Next: Creating React Components and Component Libraries

JSONX Manual