vip-git / React Jsonschema Form Material Ui
Licence: mit
📜 React - Material UI components for building Web forms from JSON Schema.
Stars: ✠95
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Jsonschema Form Material Ui
universal-json-schema
📜 Universal JSON Schema Form - Currently Support for React - Material UI components for building Web forms from JSON Schema.
Stars: ✠102 (+7.37%)
Mutual labels: json-schema, material-ui
Jesse
jesse (JSon Schema Erlang) is an implementation of a JSON Schema validator for Erlang.
Stars: ✠92 (-3.16%)
Mutual labels: json-schema
Nextjs With Redux And Material Ui
A boilerplate NextJS with Redux and Material UI
Stars: ✠79 (-16.84%)
Mutual labels: material-ui
Auxpack
A dashboard for monitoring Webpack build stats.
Stars: ✠86 (-9.47%)
Mutual labels: material-ui
Graphql To Json Schema
GraphQL Schema to JSON Schema
Stars: ✠87 (-8.42%)
Mutual labels: json-schema
Nextjs Full Demo
Demo about integration between examples of next.js and also fix some issues during development
Stars: ✠76 (-20%)
Mutual labels: material-ui
Mui Downshift
Thin layer over paypal's downshift to use Material UI visual components
Stars: ✠90 (-5.26%)
Mutual labels: material-ui
P32929.github.io
Second iteration of my portfolio - created using ReactJS, Material-UI, Overmind, etc
Stars: ✠84 (-11.58%)
Mutual labels: material-ui
Python Lambdarest
Flask like web framework for AWS Lambda
Stars: ✠84 (-11.58%)
Mutual labels: json-schema
Fullstack Shopping Cart
MERN stack shopping cart, written in TypeScript
Stars: ✠82 (-13.68%)
Mutual labels: material-ui
Gatsby Starter Procyon
An opinionated Gatsby starter designed for trash-eating pandas.
Stars: ✠88 (-7.37%)
Mutual labels: material-ui
Create Mui Theme
online tool for creating material-ui themes
Stars: ✠80 (-15.79%)
Mutual labels: material-ui
Typescript Nextjs Redux Material Ui Example
next.js v9, typescript v3.7, redux, material-ui v4, react-hooks, redux-saga, SSR
Stars: ✠93 (-2.11%)
Mutual labels: material-ui
Docless
A scala DSL to generate JSON schema and swagger documentation for your web services.
Stars: ✠78 (-17.89%)
Mutual labels: json-schema
React Express Webpack
React boilerplate with ES2015, Express.js, and Webpack 4
Stars: ✠84 (-11.58%)
Mutual labels: material-ui
Understanding Json Schema
A website aiming to provide more accessible documentation for JSON schema.
Stars: ✠1,268 (+1234.74%)
Mutual labels: json-schema
Angular Material Dashboard
Angular admin dashboard with material design
Stars: ✠1,321 (+1290.53%)
Mutual labels: material-ui
React Json Schema Form (Mui)
A Material UI port of jsonschema-form.
A live playground and Detailed Docs
Install instructions via npm
npm install --save react-jsonschema-form-material-ui
Example Usage
More detailed example can be seen here
// Library
import React from 'react';
import MaterialJsonSchemaForm from 'react-jsonschema-form-material-ui';
// Internals
const schema = require('./path-to your-schema.json');
const uiSchema = require('./path-to your-ui-schema.json');
const formData = require('./path-to your-ui-formData.json');
const Example () => {
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 }) => {
console.log('onFormChanged: ',formData); // eslint-disable-line no-console
}
const onUpload = (value) => {
console.log('onUpload: ', value); // eslint-disable-line no-console
}
return (
<MaterialJsonSchemaForm
schema={givenSchema}
uiSchema={givenUISchema}
formData={givenFormData}
onCancel={onCancel}
onSubmit={onSubmit}
onUpload={onUpload}
onChange={onFormChanged}
onError={onError}
/* Optional Param for custom functions to be executed for transforming data */
interceptors={{
translateRatings: (givenData, uiData) => ({ givenData, uiData }),
}}
/* Optional Param for custom components */
components={{
customComponent: ({ onChange, ...rest }) => (
<CustomComponent onChange={onChange} formData={givenFormData} uiData={givenUIData} {...rest} />
),
customRating: ({ onChange, ...rest }) => (
<CustomRating onChange={onChange} formData={givenFormData} uiData={givenUIData} {...rest} />
),
}}
/* Optional Param for custom validation */
validations={{
confirmPassword: ({ schema, validations, formData, value }) => value !== formData.pass1 && ({
message: validations.confirmPassword.message,
inline: true,
}),
}}
/* Optional Param to auto submit form on press of enter */
submitOnEnter
/>
);
}
export default Example;
[JSONSchema-Draft-7 Support]
Latest Version- 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 me info you can follow our changelog
Contributing
We welcome all contributions, enhancements, and bug-fixes. Open an issue on GitHub and submit a pull request.
Building/Testing
To build/test the project locally on your computer:
Fork this repo and then clone
git clone https://github.com/vip-git/react-jsonschema-form-material-ui.git
Install dependencies and module generator
npm install
Run the demo to test your changes
npm run start:demo (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 once your PR gets merged.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].