Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/drom/resch
:herb: React JSON Schema Form
https://github.com/drom/resch
hacktoberfest json-schema react
Last synced: 3 days ago
JSON representation
:herb: React JSON Schema Form
- Host: GitHub
- URL: https://github.com/drom/resch
- Owner: drom
- License: mit
- Created: 2017-06-12T17:57:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-31T00:00:31.000Z (9 months ago)
- Last Synced: 2024-10-28T13:36:10.714Z (8 days ago)
- Topics: hacktoberfest, json-schema, react
- Language: JavaScript
- Homepage: https://beta.observablehq.com/@drom/resch-reactive-schema
- Size: 130 KB
- Stars: 9
- Watchers: 4
- Forks: 2
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.org/package/resch)
[](https://github.com/drom/resch/actions)
[](https://coveralls.io/github/drom/resch?branch=master)
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` - fixes the property existance
### array
* `items` : `Object`
* `minItems` : `number`
* `maxItems` : `number`
### OneOf
```js
{
"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
```js
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.
```js
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
```js
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`)
```js
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
```js
render () {
return (
$('div', {},
$(this.Form, { data: this.state.data })
)
);
}
}
```
Where to put your rendered React Form Component
```js
ReactDOM.render(
$(App, {}),
document.getElementById('root')
);
```