@theajr/json-to-react
v1.0.2
Published
>
Downloads
7
Readme
@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