resch
v0.17.0
Published
Reactive JSON Schema form generator
Downloads
22
Readme
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')
);