{"id":22661437,"url":"https://github.com/naguvan/react-mst-form","last_synced_at":"2025-04-12T06:11:25.704Z","repository":{"id":57334870,"uuid":"122021978","full_name":"naguvan/react-mst-form","owner":"naguvan","description":"Library for generating React forms from JSON schema using the react, material-ui, mobx and mobx-state-tree.","archived":false,"fork":false,"pushed_at":"2018-11-10T04:23:06.000Z","size":5814,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T01:36:24.583Z","etag":null,"topics":["jest","material-ui","mobx","mobx-react","mobx-state-tree","react","typescript"],"latest_commit_sha":null,"homepage":"https://naguvan.github.io/react-mst-form/packages/typescript-react-app-demo/src/index.html","language":"TypeScript","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/naguvan.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}},"created_at":"2018-02-19T05:16:47.000Z","updated_at":"2023-02-06T12:07:53.000Z","dependencies_parsed_at":"2022-08-31T21:25:45.783Z","dependency_job_id":null,"html_url":"https://github.com/naguvan/react-mst-form","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naguvan%2Freact-mst-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naguvan%2Freact-mst-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naguvan%2Freact-mst-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naguvan%2Freact-mst-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/naguvan","download_url":"https://codeload.github.com/naguvan/react-mst-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248480422,"owners_count":21110939,"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":["jest","material-ui","mobx","mobx-react","mobx-state-tree","react","typescript"],"created_at":"2024-12-09T11:16:02.666Z","updated_at":"2025-04-12T06:11:25.681Z","avatar_url":"https://github.com/naguvan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-mst-form\n\nLibrary for generating React forms from [JSON schema](https://json-schema.org/) using the [react](https://github.com/facebook/react), [material-ui](https://github.com/mui-org/material-ui), [mobx](https://github.com/mobxjs/mobx) and [mobx-state-tree](https://github.com/mobxjs/mobx-state-tree).\n\n**https://naguvan.github.io/react-mst-form/packages/typescript-react-app-demo/src/index.html**\n\n# Running the demo\n\nTo run the `demo`, clone this repository, then run:\n\n```bash\nlerna bootstrap\n\ncd packages/typescript-react-app-demo or cd packages/create-react-app-demo\n\nnpm run start\n```\n\n# Basic usage\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\n\nimport { create } from \"jss\";\nimport preset from \"jss-preset-default\";\nimport JssProvider from \"react-jss/lib/JssProvider\";\n\nimport MuiThemeProvider from \"material-ui/styles/MuiThemeProvider\";\nimport createMuiTheme from \"material-ui/styles/createMuiTheme\";\n\nimport { Form } from \"react-mst-form\";\n\nconst schema = {\n  type: \"object\",\n  properties: {\n    name: {\n      type: \"object\",\n      properties: {\n        first: {\n          type: \"string\",\n          title: \"First\",\n          minLength: 5\n        },\n        middle: {\n          type: \"string\",\n          title: \"Middle\",\n          minLength: 5\n        },\n        last: {\n          type: \"string\",\n          title: \"Last\",\n          minLength: 5\n        },\n        age: {\n          type: \"number\",\n          title: \"Age\",\n          maximum: 10,\n          minimum: 3\n        }\n      }\n    },\n    birthdate: {\n      format: \"date\",\n      type: \"string\",\n      title: \"Birth date\"\n    },\n    ipv4: {\n      type: \"string\",\n      title: \"ipv4\",\n      minLength: 5,\n      maxLength: 20,\n      format: \"ipv4\"\n    },\n    color: {\n      type: \"string\",\n      title: \"In which color\",\n      format: \"color\"\n    },\n    size: {\n      type: \"number\",\n      title: \"Size\",\n      maximum: 10,\n      minimum: 3,\n      multipleOf: 3\n    },\n    type: {\n      type: \"number\",\n      title: \"Select a type\",\n      enum: [1, 2, 3]\n    },\n    agree: {\n      type: \"boolean\",\n      title: \"I agree with your terms\",\n      const: true\n    },\n    array: {\n      type: \"array\",\n      title: \"Array\",\n      items: {\n        type: \"object\",\n        properties: {\n          name: {\n            type: \"string\",\n            title: \"name\",\n            minLength: 3\n          },\n          age: {\n            type: \"number\",\n            title: \"age\",\n            multipleOf: 2,\n            minimum: 2\n          }\n        }\n      },\n      minItems: 2,\n      maxItems: 4\n    }\n  }\n};\n\nconst meta = {\n  type: \"object\",\n  properties: {\n    name: {\n      layout: [[\"first\", \"last\"], \"middle\", \"age\"],\n      type: \"object\",\n      properties: {\n        first: {\n          sequence: 1,\n          icon: \"face\",\n          iconAlign: \"start\",\n          type: \"string\"\n        },\n        middle: {\n          sequence: 1,\n          type: \"string\"\n        },\n        last: {\n          sequence: 2,\n          type: \"string\"\n        },\n        age: {\n          sequence: 2,\n          icon: \"build\",\n          type: \"number\"\n        }\n      }\n    },\n    birthdate: {\n      component: \"date\",\n      icon: \"date-range\",\n      iconAlign: \"end\",\n      type: \"string\"\n    },\n    color: {\n      component: \"color\",\n      type: \"string\"\n    },\n    size: {\n      component: \"range\",\n      step: 1,\n      type: \"number\"\n    },\n    type: {\n      error: \"should not be empty\",\n      options: [\n        { label: \"One\", value: 1 },\n        { label: \"Two\", value: 2 },\n        { label: \"Three\", value: 3 }\n      ],\n      type: \"number\"\n    },\n    agree: {\n      type: \"boolean\"\n    },\n    array: {\n      type: \"array\",\n      items: {\n        properties: {\n          age: {\n            type: \"number\"\n          }\n        },\n        type: \"object\"\n      }\n    }\n  }\n};\n\nconst config = {\n  title: \"Test Form\",\n  cancel: \"Cancel\",\n  submit: \"create\",\n  sections: [\n    {\n      title: \"Basic\",\n      layout: [\"name\", \"birthdate\", [\"size\", \"color\"]]\n    },\n    {\n      title: \"Others\",\n      layout: [\"ipv4\", \"type\", \"agree\", \"array\"]\n    }\n  ]\n};\n\nconst snapshot = {\n  name: {\n    first: \"naguvan\",\n    middle: \"sk\",\n    last: \"sk\",\n    age: 1\n  },\n  birthdate: \"2018-10-29\",\n  size: 5,\n  agree: false\n};\n\nconst onSubmit = values =\u003e {\n  window.alert(`submitted values:\\n\\n${JSON.stringify(values, null, 2)}`);\n};\n\nconst jss = create(preset());\n\nrender(\n  \u003cJssProvider jss={jss}\u003e\n    \u003cMuiThemeProvider theme={createMuiTheme({})}\u003e\n      \u003cForm\n        config={config}\n        schema={schema}\n        meta={meta}\n        snapshot={snapshot}\n        onSubmit={onSubmit}\n      /\u003e\n    \u003c/MuiThemeProvider\u003e\n  \u003c/JssProvider\u003e,\n  document.getElementById(\"form-holder\")\n);\n```\n\nAnd, provided that you have a `\u003cdiv id=\"form-holder\"\u003e`, you should see something like this:\n\n![](https://raw.githubusercontent.com/naguvan/react-mst-form/master/packages/react-mst-form/demo/sections.png)\n\nAnd when the form has validation errors..\n\n![](https://raw.githubusercontent.com/naguvan/react-mst-form/master/packages/react-mst-form/demo/form-validation.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaguvan%2Freact-mst-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaguvan%2Freact-mst-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaguvan%2Freact-mst-form/lists"}