jsontojsx v1.0.20

jsontojsx v1.0.10

This library convert JSON to JSX Element.

Installation

Using npm

    npm i jsontojsx

Usage

    import { renderEngine } from 'jsontojsx';

    renderEngine(testConfig);

JSON Structure

const testConfig = {
    children: [
    {
type: 'div',
id: 'container-div',
class: 'container-class',
attributes: {},
styles: { padding: 8 },
children: [
{
  type: 'h6',
  id: 'para',
  class: 'para-class',
  attributes: {
    paddingBottom: 8,
  },
  value: 'Login Form',
},
{
  type: 'p',
  id: 'para',
  class: 'para-class',
  attributes: {},
  value: 'Username',
},
{
  type: 'input',
  onTextChange: () => console.log('text ==> '),
},
{
  type: 'p',
  id: 'para',
  attributes: {
    marginTop: 4
  },
  class: 'para-class',
  value: 'Password',
},
{
  type: 'input',
  onTextChange: () => console.log('text ==> '),
},
{
  type: 'button',
  attributes: {
    marginTop: 8
  },
  style: {},
  onPress: () => console.log('Button Click'),
}
]
    },
  ]
};

Output

JSON Reference

Type h1 - h6

{
  type: 'h6',
  id: '<Tag id>',
  class: '<Tag class name>',
  attributes: { fontSize: 16 },
  value: 'Heading',
}

Type p

{
  type: 'p',
  id: '<Tag id>',
  class: '<Tag class name>',
  attributes: { fontSize: 16 },
  value: 'Heading',
}

Type a

{
  type: 'a',
  id: '<Tag id>',
  class: '<Tag class name>',
  attributes: { href: 'https://www.google.com', },
  value: 'Hyperlink',
}

Type Image

{
 type: 'img',
 id: '<Tag id>',
 class: '<Tag class name>',
 src: 'https://wallpaperaccess.com/full/317501.jpg',
 alt: "<Alt image desc>",
}

Type Button

{
 type: 'button',
 buttonText: 'Submit',
 attributes: { marginTop: 8 },
 onPress: () => foo(),
},

Type Input

{
  type: 'input',
  onTextChange: (value) => console.log(value),
}

Type Radio Group

  {
        type: 'radioGroup',
        onPress: (value) => console.log(value),
        children: [
          {
            type: 'radio',
            value: 1,
            children: [
              {
                type: 'Element',
                tagName: 'p',
                attributes: {},
                children: [
                  {
                    type: 'Text',
                    content: 'Radio 1',
                  },
                ],
              },
            ]
          },
          {
            type: 'radio',
            value: 2,
            children: [
              {
                type: 'Element',
                tagName: 'p',
                attributes: {},
                children: [
                  {
                    type: 'Text',
                    content: 'Radio 2',
                  },
                ],
              },]
          },]
      }

Type Checkbox

{
  type: 'checkBox',
  attributes: {
    value: 'Hello',
  },
  children: [{
    type: 'Text',
    content: 'CheckBox'
  }]
}