@ctejadan/json-2-react v1.0.0

json-2-react

Renders simple React Components from a JSON

Install

npm install --save json-2-react

Usage

import React, { Component } from 'react'

import JSON2React from 'json-2-react'
import elements from './elements.json'

class Example extends Component {
  render () {
    return (
      <JSON2React elements={elements} />
    )
  }
}

Use a valid JSON such as this one

[
  {
    "type": "div",
    "className": "col-12",
    "style": {
      "backgroundColor": "red",
      "height": 400
    },
    "children": [
      {
        "type": "h1",
        "style": {
          "fontSize": 24,
          "color": "#fff",
          "textAlign": "center",
          "paddingTop": 80
        },
        "data": "HEADER"
      },
      {
        "type": "div",
        "className": "col-12",
        "style": {
          "backgroundColor": "black",
          "height": 100
        }
      },
      {
        "type": "div",
        "className": "d-flex",
        "style": {
          "height": 100
        },
        "children": [
          {
            "type": "div",
            "className": "col-3",
            "style": {
              "backgroundColor": "cyan",
              "border": "1px solid black",
              "height": 100
            },
            "children": [
              {
                "type": "a",
                "href": "https://www.google.cl",
                "data": "link1",
                "style": {
                  "textAlign": "center",
                  "paddingTop": 30
                }
              }
            ]
          },
          {
            "type": "div",
            "className": "col-3",
            "style": {
              "backgroundColor": "cyan",
              "border": "1px solid black",
              "height": 100
            },
            "children": [
              {
                "type": "a",
                "href": "https://www.google.cl",
                "data": "link2",
                "style": {
                  "textAlign": "center",
                  "paddingTop": 30
                }
              }
            ]
          },
          {
            "type": "div",
            "className": "col-3",
            "style": {
              "backgroundColor": "cyan",
              "border": "1px solid black",
              "height": 100
            },
            "children": [
              {
                "type": "a",
                "href": "https://www.google.cl",
                "data": "link3",
                "style": {
                  "textAlign": "center",
                  "paddingTop": 30
                }
              }
            ]
          },
          {
            "type": "div",
            "className": "col-3",
            "style": {
              "backgroundColor": "cyan",
              "border": "1px solid black",
              "height": 100
            },
            "children": [
              {
                "type": "a",
                "href": "https://www.google.cl",
                "data": "link4",
                "style": {
                  "textAlign": "center",
                  "paddingTop": 30
                }
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "type": "div",
    "className": "d-flex",
    "children": [
      {
        "type": "div",
        "className": "col-3",
        "style": {
          "backgroundColor": "blue",
          "height": 200
        },
        "children": []
      },
      {
        "type": "div",
        "className": "col-9",
        "style": {
          "backgroundColor": "green",
          "height": 300
        },
        "children": [
          {
            "type": "a",
            "href": "https://www.google.cl",
            "children": [
              {
                "type": "img",
                "className": "img-fluid",
                "style": {
                  "height": 150
                },
                "src": "https://cdn.worldvectorlogo.com/logos/react.svg"
              }
            ]
          },
          {
            "type": "p",
            "style": {
              "fontSize": 12,
              "color": "#000000"
            },
            "data": "Hi, I'm a dummy text"
          }
        ]
      }
    ]
  },
  {
    "type": "div",
    "className": "col-12",
    "style": {
      "backgroundColor": "grey",
      "height": 200
    },
    "children": [
      {
        "type": "h1",
        "data": "FOOTER",
        "style": {
          "textAlign": "center",
          "paddingTop": 30
        }
      }
    ]
  }
]

License

MIT © ctejadan