### JSONX Manual

- Home
- Getting Started
- Using Advanced Props
- External and Custom Components
- Creating React Components and Component Libraries
- JSONX & JXM Spec
- Samples
- Roadmap
- Full API Docs

# 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

- Home
- Getting Started
- External and Custom Components
- Using Advanced Props
- Creating React Components and Component Libraries
- JSONX & JXM Spec
- Samples
- Roadmap
- Full API Docs