jsonreactor

JSON Reactor - JSON to REACT

Transform simple or nested JSON objects during run time into React Components

Install

npm install jsonreactor --save-dev

Demo

Usage

Inside of your React component, after you recieve your JSON payload you can transform them into React components in the following manner:

Step 1: Define your Component map

import ParaGraph from "./yourComponentLibrary/ParaGraph";
import { OrderedList, ListItem } from "./yourComponentLibrary/OrderedList";

const componentTable = {
  paragraph: ParaGraph,
  orderedlist: OrderedList,
  listitem: ListItem
};

Step 2: Call JSONReactor component

Now pass your object data to JSONReactor along with the componentTable mapping. For example, say you received JSON that looked like this object:

const jsonObject = {
  paragraph: {
    content: "here is some content to display!"
  },
  orderedlist: [
    {
      listitem: {
        content: "test #1"
      }
    },
    {
      listitem: {
        content: "test #2"
      }
    },
    {
      listitem: {
        content: "test #3"
      }
    }
  ]
};

You can now call JSONReactor:

class JSONReactorExample extends React.Component {
  render() {
    return <JSONReactor data={jsonObject} components={componentTable} />;
  }
}