resch

The tool to create React components from JSON schema to edit matching immutable data.

Semantics

stst JSON schema specification created mostly with JSON data validation in mind. Some of JSON schema semantics can be used to describe the UI view of data.

type specific view semantics

string, number, integer

• enum : Array<> - creates dropdown selector

object

• properties : Object
• required : Array<string> - fixes the property existance

array

• items : Object
• minItems : number
• maxItems : number

OneOf

{
  "oneOf": [
    { "type": "number" },
    { "type": "string" }
  ]
}

Under the hood

Resch by default expects you to have only one data storage in App state, Later this data is chopped by objects and arrays until it reaches the leaf according provided JSON schema. Every time you change data in one your leafs, Resch is updating App state, and propagate all changes down below.

Usage

Resch is a tool that helps to create editable UI form from JSON schema. Resch by default works with React, ReactDOM and immutability-helper libraries, but you are free to use any alternative libraries for your purpose.
Note: Resch doesn't use JSX, so if you are planning to use JSX, do not forget to import babel

npm install resch --save

This is how JSON schema looks like

const schema = {
    type: 'object',
    title: 'Beer',
    properties: {
        name: { type: 'string', title: 'Name' },
        country: { type: 'string', title: 'Country', enum: ['UK', 'US', 'AU']}
    }
}

By default resch form generator expects from you to provide React. So in your actual components you don't need to be required to import React. Alternatively you can provide any other library which has createElement, Component and shouldComponentUpdate methods.

const React = require('react')
    , ReactDOM = require('react-dom')
    , update = require('immutability-helper')
    , resch = require('resch')
    ;
const $ = React.createElement;

const desc = Object.assign({}, resch);
const genForm = resch.__form(React)(desc);

desc is a simple hashtable that contians mapping between component name and React component. By default Object.assign({}, resch) contains components for default types of JSON schema, but you can easily register your own components or modify existing one by overriding it, for example
resch.__form is a method that accepts how to render React and descriptor desc then returns a function with configurations as a parameters

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = { data: props.data };
        this.updateState = this.updateState.bind(this);

        this.Form = genForm({
            schema: schema,
            path: [],
            updateState: this.updateState
        });
    }

In constructor state with data property should be defined. data is an immutable objects holding all data for JSON Schema
Here you should also generate all your React Forms using predefined function genForm, in order not to have problems with losing focus. This function recursively generates React Forms by using schema, and expects to receive configs which is an object containing schema (JSON schema), updateState (function allowing leafs to update state data), path (helper to generate spec for updateState)

    updateState (spec) {
        this.setState(function (state) {
            return update(state, spec);
        });
    }

updateState function is a method to update your state data, that accepts spec which is an object dynamically generated by leaf components using path as a helper. By using this spec immutability-helper knows which part of state data should be updated following immutability paradigm

    render () {
        return (
            $('div', {},
                $(this.Form, { data: this.state.data })
            )
        );
    }
}

Where to put your rendered React Form Component

ReactDOM.render(
    $(App, {}),
    document.getElementById('root')
);