{"id":15685790,"url":"https://github.com/drom/resch","last_synced_at":"2025-05-07T01:42:44.457Z","repository":{"id":57354446,"uuid":"94125115","full_name":"drom/resch","owner":"drom","description":":herb: React JSON Schema Form","archived":false,"fork":false,"pushed_at":"2024-01-31T00:00:31.000Z","size":133,"stargazers_count":9,"open_issues_count":19,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-28T05:43:54.407Z","etag":null,"topics":["hacktoberfest","json-schema","react"],"latest_commit_sha":null,"homepage":"https://beta.observablehq.com/@drom/resch-reactive-schema","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-12T17:57:17.000Z","updated_at":"2021-12-29T23:17:53.000Z","dependencies_parsed_at":"2024-01-30T23:54:56.354Z","dependency_job_id":"b3bbd7fa-4859-4e91-8fe4-39bff903ac4d","html_url":"https://github.com/drom/resch","commit_stats":{"total_commits":132,"total_committers":4,"mean_commits":33.0,"dds":0.08333333333333337,"last_synced_commit":"0020b0fa522b7e1eb7e4100782e3a5a94b403e55"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drom%2Fresch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drom%2Fresch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drom%2Fresch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drom%2Fresch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drom","download_url":"https://codeload.github.com/drom/resch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252798400,"owners_count":21805876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","json-schema","react"],"created_at":"2024-10-03T17:30:59.021Z","updated_at":"2025-05-07T01:42:44.438Z","avatar_url":"https://github.com/drom.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM version](https://img.shields.io/npm/v/resch.svg)](https://www.npmjs.org/package/resch)\n[![Actions Status](https://github.com/drom/resch/workflows/Tests/badge.svg)](https://github.com/drom/resch/actions)\n[![Coverage Status](https://coveralls.io/repos/github/drom/resch/badge.svg?branch=master)](https://coveralls.io/github/drom/resch?branch=master)\n\nThe tool to create React components from JSON schema to edit matching immutable data.\n\n## Semantics\n stst\nJSON schema specification created mostly with JSON data validation in mind.\nSome of JSON schema semantics can be used to describe the UI view of data.\n\n## type specific view semantics\n\n### string, number, integer\n\n * `enum` : `Array\u003c\u003e` - creates dropdown selector\n\n### object\n\n * `properties` : `Object`\n * `required` : `Array\u003cstring\u003e` - fixes the property existance\n\n### array\n\n * `items` : `Object`\n * `minItems` : `number`\n * `maxItems` : `number`\n\n### OneOf\n\n```js\n{\n  \"oneOf\": [\n    { \"type\": \"number\" },\n    { \"type\": \"string\" }\n  ]\n}\n```\n\n## Under the hood\n\n\nResch 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.\nEvery time you change data in one your leafs, Resch is updating App state, and propagate all changes down below.\n\n## Usage\n\nResch is a tool that helps to create editable UI form from JSON schema.\nResch by default works with React, ReactDOM and immutability-helper libraries, but you are free to use any alternative libraries for your purpose.\n\u003cbr/\u003e**Note:** Resch doesn't use JSX, so if you are planning to use JSX, do not forget to import babel\n\n\n```\nnpm install resch --save\n```\n\nThis is how JSON schema looks like\n```js\nconst schema = {\n    type: 'object',\n    title: 'Beer',\n    properties: {\n        name: { type: 'string', title: 'Name' },\n        country: { type: 'string', title: 'Country', enum: ['UK', 'US', 'AU']}\n    }\n}\n```\n\n\nBy 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.\nAlternatively you can provide any other library which has `createElement`, `Component` and `shouldComponentUpdate` methods.\n\n```js\nconst React = require('react')\n    , ReactDOM = require('react-dom')\n    , update = require('immutability-helper')\n    , resch = require('resch')\n    ;\nconst $ = React.createElement;\n\nconst desc = Object.assign({}, resch);\nconst genForm = resch.__form(React)(desc);\n```\n\n`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 \u003cbr/\u003e\n`resch.__form` is a method that accepts how to render `React` and descriptor `desc` then returns a function with configurations as a parameters\n\n```js\nclass App extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = { data: props.data };\n        this.updateState = this.updateState.bind(this);\n\n        this.Form = genForm({\n            schema: schema,\n            path: [],\n            updateState: this.updateState\n        });\n    }\n```\n\nIn constructor state with `data` property should be defined. `data` is an immutable objects holding all data for JSON Schema \u003cbr/\u003e\nHere 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`)\n\n```js\n\n    updateState (spec) {\n        this.setState(function (state) {\n            return update(state, spec);\n        });\n    }\n```\n`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\n\n\n```js\n    render () {\n        return (\n            $('div', {},\n                $(this.Form, { data: this.state.data })\n            )\n        );\n    }\n}\n```\n\n\nWhere to put your rendered React Form Component\n```js\nReactDOM.render(\n    $(App, {}),\n    document.getElementById('root')\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrom%2Fresch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrom%2Fresch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrom%2Fresch/lists"}