Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vip-git/universal-json-schema
:scroll: Universal JSON Schema Form - Currently Support for React - Material UI components for building Web forms from JSON Schema.
https://github.com/vip-git/universal-json-schema
interceptors json-schema json-schema-form jsonschema-form material-ui material-ui-advanced-forms material-ui-forms model-driven-forms mui react reference-schema ui-schema uischema xhr-schema xhrschema
Last synced: 29 days ago
JSON representation
:scroll: Universal JSON Schema Form - Currently Support for React - Material UI components for building Web forms from JSON Schema.
- Host: GitHub
- URL: https://github.com/vip-git/universal-json-schema
- Owner: vip-git
- License: mit
- Created: 2018-07-09T20:12:55.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-05-14T08:13:01.000Z (6 months ago)
- Last Synced: 2024-05-14T09:31:47.028Z (6 months ago)
- Topics: interceptors, json-schema, json-schema-form, jsonschema-form, material-ui, material-ui-advanced-forms, material-ui-forms, model-driven-forms, mui, react, reference-schema, ui-schema, uischema, xhr-schema, xhrschema
- Language: TypeScript
- Homepage: https://react-jsonschema-form-material-ui.github56.now.sh/
- Size: 11.6 MB
- Stars: 151
- Watchers: 6
- Forks: 20
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- Contributing: contributing.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# React Json Schema Form \(Mui\)
```
This Project will soon become a umbrella repo for JSON Schema Support to major Frameworks and UI Frameworks.
```
More info on this has been outlined in [Universal JSON Schema](./universal-json-schema.md) document.
#
[](https://codecov.io/gh/vip-git/react-jsonschema-form-material-ui) [](https://snyk.io/test/github/vip-git/react-jsonschema-form-material-ui?targetFile=package.json) [](https://github.com/vip-git/universal-json-schema) [](https://www.npmjs.com/package/react-jsonschema-form-material-ui) [](https://github.com/vip-git/react-jsonschema-form-material-ui/issues/) [](https://github.com/vip-git/react-jsonschema-form-material-ui/pulls/)
[](https://github.com/vip-git/universal-json-schema/actions/workflows/node.js.yml) [](https://automate.browserstack.com/public-build/MzZ5RE5vdml6Yk5EM0JTZ3l5cGxJKzVLRWlqNVdHbDkzdkprejFkSWZtZz0tLTdxdGFIY3F5a2pXSmNMM2ZLaVMwQ3c9PQ==--74a6da6f146182f21dbe380708e81c257b1cefab%) [](https://app.eu-central-1.saucelabs.com/builds/d31c750a8b0944d8ae40ac02038fb574)
A [**Material UI**](http://www.material-ui.com/) port of [**jsonschema-form.**](https://json-schema.org/)
A [**live playground**](https://react-jsonschema-form-material-ui.github56.now.sh/) and [**Detailed Docs**](https://docs.universal-json-schema.com/universal-json-schema/platform/web/react/material-ui)
## Install instructions via npm (MUI 5+)
```text
npm install --save react-jsonschema-form-material-ui
```
>Follow [Releases page](https://github.com/vip-git/universal-json-schema/releases) to use latest or preleased tags.
#### For legacy version of < MUI 4
```text
npm install --save [email protected]
```
## Basic Example Usage
```jsx
// Library
import React from 'react';
import MaterialJsonSchemaForm from 'react-jsonschema-form-material-ui';
// Internals
import schema from '../simple/schema.json';
import uiSchema from '../simple/ui-schema.json';
const givenXhrSchema = require('./path-to your-xhr-schema.json'); // Optional
import givenFormData from '../simple/form-data.json';
export default () => {
const [formData, setFormData] = React.useState(givenFormData);
return setFormData(formData)}
onSubmit={(submittedData) => console.log('form submitted', submittedData)}
/>;
};
```
## Advanced Example Usage
> More detailed example can be seen [here](https://github.com/vip-git/universal-json-schema/blob/main/demo/web/react/body/Example.jsx#L39)
```jsx
// Library
import React from 'react';
import MaterialJsonSchemaForm from 'react-jsonschema-form-material-ui';
// Internals
const givenSchema = require('./path-to your-schema.json');
const givenUISchema = require('./path-to your-ui-schema.json');
const givenXhrSchema = require('./path-to your-xhr-schema.json');
const givenFormData = require('./path-to your-ui-formData.json');
const Example () => {
const [formData, setFormData] = React.useState(givenFormData);
const onSubmit = (value, callback) => {
console.log('onSubmit: %s', JSON.stringify(value)); // eslint-disable-line no-console
setTimeout(() => callback && callback(), 2000); // just an example in real world can be your XHR call
}
const onCancel = () => {
console.log('on reset being called');
}
const onFormChanged = ({ formData }) => setFormData(formData);
const onUpload = (value) => {
console.log('onUpload: ', value); // eslint-disable-line no-console
}
return (
({ givenData, uiData }),
}}
/* Optional Prop for custom components */
components={{
customComponent: ({ onChange, ...rest }) => (
),
customRating: ({ onChange, ...rest }) => (
),
}}
/* Optional Prop for custom validation */
validations={{
confirmPassword: ({ schema, validations, formData, value }) => value !== formData.pass1 && ({
message: validations.confirmPassword.message,
inline: true,
}),
}}
/* Optional Prop to auto submit form on press of enter */
submitOnEnter
/>
);
}
export default Example;
```
## Latest Version [](https://react-jsonschema-form-material-ui.github56.now.sh) \[JSONSchema-Draft-7 Support]
- Build system now upgraded to webpack 5
- React select values are no longer stringify results but array values.
- New Tabs UI to divide sub sections to tabs
- Additional Properties and Additional Items feature enabled
- `"ui:options"` and `"ui:style"` enabled for prop passing and styling every field
- On the fly module creation
- Reference Schema's via http and inline references
- Support alternatives - `oneOf`, `anyOf`, `allOf`
- Support for dependencies - array of conditionals
- new Prop `onError` to get errors available in form on every change
- new Prop `uiData` to control ui only data to add separation of concern with form data
- Demo updated with monaco editor and live validation changes
- New interceptors to transform form and uiData using uiSchema - `ui:interceptor`
> For more info you can follow our [changelog](https://github.com/vip-git/universal-json-schema/blob/main/changelog.md)
## Contributing
> We welcome [all contributions](/contributing.md), enhancements, and bug-fixes.
> Open an [issue on GitHub](https://github.com/vip-git/universal-json-schema/issues) and submit a [pull request](https://github.com/vip-git/universal-json-schema/pulls).
#### Building/Testing
To build/test the project locally on your computer:
> Fork this repo and then clone
```
git clone https://github.com/vip-git/universal-json-schema.git
```
> Install dependencies and module generator
```
npm install
```
> Run the demo to test your changes
```
npm start (open http://localhost:3005 once build is successful)
```
> Run the tests once you are done with your changes
```
npm test
```
You can send a PR through and a release will be made following [Semantic Versioning](https://semver.org/) once your PR gets merged.