## Index

### References

- default
- renderFile

### Variables

- _jsonxChildren
- _jsonxComponents
- _jsonxHelpers
- _jsonxProps
- _jsonxUtils
- renderIndex

### Functions

- __express
- __getReact
- __getReactDOM
- compile
- getReactElement
- getReactElementFromJSON
- getReactElementFromJSONX
- getRenderedJSON
- jsonToJSX
- jsonxHTMLString
- jsonxRender
- outputHTML
- outputJSON
- outputJSX

## References

### default

Renames and exports getReactElementFromJSONX

### renderFile

Renames and exports __express

## Variables

### Const _jsonxChildren

_jsonxChildren: __module = ...

- Defined in index.ts:328

### Const _jsonxComponents

_jsonxComponents: __module = ...

- Defined in index.ts:329

### Const _jsonxHelpers

_jsonxHelpers: { luxon: __module; numeral: typeof numeral } = ...

- Defined in index.ts:332

#### Type declaration

- ##### luxon: __module

- ##### numeral: typeof numeral

### Const _jsonxProps

_jsonxProps: __module = ...

- Defined in index.ts:330

### Const _jsonxUtils

_jsonxUtils: __module = ...

- Defined in index.ts:331

### Let renderIndex

renderIndex: number = 0

- Defined in index.ts:28

## Functions

### __express

- __express(filePath: string, options: any, callback: any): undefined | string

- - Defined in express.ts:14

  Use JSONX for express view rendering

  #### Parameters

  - ##### filePath: string

    path to jsonx express view

  - ##### options: any

    property used for express view {locals}

  - ##### callback: any

  #### Returns undefined | string

### __getReact

- __getReact(): typeof React

- - Defined in index.ts:316

  Exposes react module used in JSONX

  #### Returns typeof React

  React

### __getReactDOM

- __getReactDOM(): __module

- - Defined in index.ts:324

  Exposes react dom module used in JSONX

  #### Returns __module

  ReactDOM

### compile

- compile(jsonx: defs.jsonx, resources: {}): (props: any) => ReactElementLike

- - Defined in index.ts:227

  converts a jsonx json object into a react function component

  example

    jsonx.compile({jsonx:{component:'div',props:{title:'some title attribute'},children:'inner html text'}}) //=>React Function Component

  #### Parameters

  - ##### jsonx: defs.jsonx

    valid JSONX JSON

  - ##### resources: {}

    props for react element

  #### Returns (props: any) => ReactElementLike

  React element via React.createElement

  - - (props: any): ReactElementLike

    - #### Parameters

      - ##### props: any

      #### Returns ReactElementLike

### Const getReactElement

- getReactElement(jsonx?: defs.jsonx | defs.simpleJsonx, resources: {}): ReactElementLike | JSONReactElement | null | string | undefined

- - Defined in index.ts:196

  #### Parameters

  - ##### Optional jsonx: defs.jsonx | defs.simpleJsonx

  - ##### resources: {}

  #### Returns ReactElementLike | JSONReactElement | null | string | undefined

### getReactElementFromJSON

- getReactElementFromJSON(__namedParameters: JSONReactElement): ReactElementLike

- - Defined in index.ts:206

  converts a json object {type,props,children} into a react element

  example

    jsonx.getReactElementFromJSON({type:'div',props:{title:'some title attribute'},children:'inner html text'})

  #### Parameters

  - ##### __namedParameters: JSONReactElement

  #### Returns ReactElementLike

  React element via React.createElement

### getReactElementFromJSONX

- getReactElementFromJSONX(jsonx?: defs.jsonx | defs.simpleJsonx, resources: {}): ReactElementLike | JSONReactElement | null | string | undefined

- - Defined in index.ts:105

  Use React.createElement and JSONX JSON to create React elements

  example

    // Uses react to create the equivalent JSX hello world jsonx.getReactElementFromJSONX({component:'myCompnent',props:{style:{color:'blue'}},children:'hello world'})

  property

    {object} this - options for getReactElementFromJSONX

  property

    {Object} [this.componentLibraries] - react components to render with JSONX

  property

    {boolean} [this.debug=false] - use debug messages

  property

    {boolean} [this.returnJSON=false] - return json object of {type,props,children} instead of react element

  property

    {boolean} [this.disableRenderIndexKey=false] - disables auto assign a key prop

  property

    {function} [this.logError=console.error] - error logging function

  property

    {string[]} [this.boundedComponents=[]] - list of components that require a bound this context (usefult for redux router)

  #### Parameters

  - ##### Optional jsonx: defs.jsonx | defs.simpleJsonx

    any valid JSONX JSON object

  - ##### resources: {}

    any additional resource used for asynchronous properties

  #### Returns ReactElementLike | JSONReactElement | null | string | undefined

  React element via React.createElement

### Const getRenderedJSON

- getRenderedJSON(jsonx?: defs.jsonx | defs.simpleJsonx, resources: {}): ReactElementLike | JSONReactElement | null | string | undefined

- - Defined in index.ts:195

  #### Parameters

  - ##### Optional jsonx: defs.jsonx | defs.simpleJsonx

  - ##### resources: {}

  #### Returns ReactElementLike | JSONReactElement | null | string | undefined

### jsonToJSX

- jsonToJSX(json: JSONReactElement): string

- - Defined in index.ts:291

  converts JSONX JSON IR to JSX

  example

    jsonx.jsonToJSX({ type: 'div', props: { key: 5, title: 'test' }, children: 'hello' }) // => '

    hello
    '

  #### Parameters

  - ##### json: JSONReactElement

    {type,props,children}

  #### Returns string

  jsx string

### Const jsonxHTMLString

- jsonxHTMLString(config: defs.OutputHTMLConfig): string

- - Defined in index.ts:282

  #### Parameters

  - ##### config: defs.OutputHTMLConfig

  #### Returns string

### jsonxRender

- jsonxRender(config: defs.RenderConfig): void

- - Defined in index.ts:41

  Use JSONX without any configuration to render JSONX JSON to HTML and insert JSONX into querySelector using ReactDOM.render

  example

    // Uses react to create

    hello world

    jsonx.jsonxRender({ jsonx: { component: 'div', props:{className:'jsonx-generated',children:[{ component:'p',props:{style:{color:'red'}}, children:'hello world' }]}}, querySelector:'#myApp', });

  property

    {object} this - options for getReactElementFromJSONX

  #### Parameters

  - ##### config: defs.RenderConfig

    options used to inject html via ReactDOM.render

  #### Returns void

### outputHTML

- outputHTML(config: defs.OutputHTMLConfig): string

- - Defined in index.ts:70

  Use ReactDOMServer.renderToString to render html from JSONX

  example

    // Uses react to create

    hello world

    jsonx.outputHTML({ jsonx: { component: 'div', props:{className:'jsonx-generated',children:[{ component:'p',props:{style:{color:'red'}}, children:'hello world' }]}}, });
  property

    {object} this - options for getReactElementFromJSONX

  #### Parameters

  - ##### config: defs.OutputHTMLConfig

    options used to inject html via ReactDOM.render

  #### Returns string

  React genereated html via JSONX JSON

### outputJSON

- outputJSON(jsonx: defs.jsonx, resources?: {}): JSONReactElement

- - Defined in index.ts:270

  Compiles JSONX into JSON IR format for react create element

  example

    jsonx.outputJSON({ component: 'div', props: { title: 'test', }, children: 'hello', }); //=> { type: 'div', props: { key: 5, title: 'test' }, children: 'hello' }

  property

    {object} this - options for getReactElementFromJSONX

  #### Parameters

  - ##### jsonx: defs.jsonx

    any valid JSONX JSON object

  - ##### resources: {} = ...

    any additional resource used for asynchronous properties

  #### Returns JSONReactElement

  json - {type,props,children}

### outputJSX

- outputJSX(jsonx: defs.jsonx, resources: {}): string

- - Defined in index.ts:249

  converts JSONX JSON IR to JSX

  example

    jsonx.jsonToJSX({ type: 'div', props: { key: 5, title: 'test' }, children: 'hello' }) // => '

    hello
    '

  #### Parameters

  - ##### jsonx: defs.jsonx

  - ##### resources: {}

  #### Returns string

  jsx string