https://github.com/gregnb/jsonreactor

Transform simple or nested JSON objects during run time into React Components
https://github.com/gregnb/jsonreactor

javascript json nested-json-objects react

Last synced: about 1 year ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/gregnb/jsonreactor
• Owner: gregnb
• License: mit
• Created: 2017-09-26T03:50:03.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-11-04T18:36:52.000Z (over 8 years ago)
• Last Synced: 2025-05-07T14:53:08.190Z (about 1 year ago)
• Topics: javascript, json, nested-json-objects, react
• Language: JavaScript
• Size: 10.7 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          


  



# JSON Reactor - JSON to REACT

[![Build Status](https://travis-ci.org/gregnb/jsonreactor.svg?branch=master)](https://travis-ci.org/gregnb/jsonreactor)

[![dependencies Status](https://david-dm.org/gregnb/jsonreactor/status.svg)](https://david-dm.org/gregnb/jsonreactor)

[![npm version](https://badge.fury.io/js/jsonreactor.svg)](https://badge.fury.io/js/jsonreactor)

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

## Install

`npm install jsonreactor --save-dev `

## Demo

[![Edit jsonreactor](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/1qxj58vnpl)

## 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

```js

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:

```js

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:

```js

class JSONReactorExample extends React.Component {

  render() {

    return ;

  }

}

```