@theajr/json-to-react v1.0.2

@theajr/json-to-react

Install

npm i @theajr/json-to-react

Usage

import React, { Component } from "react";
import JTREngine from "@theajr/json-to-react";

const Link = ({ href, title }) => (
  <a
    style={{
      padding: "10px",
      textDecoration: "none",
      marginRight: 20,
      color: "rgba(29,161,242,1.00)",
      boxShadow: "0px 0px 4px rgba(29,161,242,1.00)",
      borderRadius: 5
    }}
    href={href}
    title={title}
  >
    {title}
  </a>
);

const schema = {
  type: "div",
  content: [
    {
      type: "h2",
      content: "HTML5 Demo"
    },
    {
      type: "div",
      content: [
        {
          type: "b",
          content: "Welcome "
        },
        {
          type: "span",
          content: "@name"
        },
        {
          type: "h4",
          content: "ProGramming Languages!"
        }
      ]
    },

    {
      type: "Iterator",
      groupComponent: "ul",
      list: "@languages",

      content: {
        type: "li",
        content: "@item"
      }
    },
    {
      type: "Iterator",
      groupComponent: "ul",
      list: "@links",
      content: {
        type: "span",
        content: [
          {
            type: "Link",
            props: {
              href: "@href",
              title: "@title"
            }
          }
        ]
      }
    }
  ]
};

const data = {
  name: "AJay Kumar Pathuri",
  loggedIn: false,
  languages: ["Javascript", "Python"],
  links: [
    {
      href: "https://www.facebook.com/ajr.jar",
      title: "Facebook"
    },
    {
      href: "https://twitter.com/JayPathURI",
      title: "Twitter"
    },
    {
      href: "https://linkedin.com/in/theajr",
      title: "LinkedIn"
    }
  ]
};

JTREngine.registerComponent("Link", Link);
const MyApp = () => JTREngine.render(schema, data);

export default class App extends Component {
  render() {
    return <MyApp />;
  }
}

License

MIT © theajr