description |
---|
React jsonschema form comes with inbuilt and custom components |
npm install --save react-jsonschema-form-material-ui
Component Name | Schema | UISchema | FormData | Type | Status |
---|---|---|---|---|---|
****Material UI - Date / Time Picker**** | ✅ | ✅ | ✅ | Inbuilt | ****Done**** |
****Material UI Selectbox**** | ✅ | ****❌ | ✅ | Inbuilt | Done**** |
****React Select and Multi Select**** | ✅ | ✅ | ✅ | Inbuilt | Done**** |
****React Creatable Select**** | ✅ | ✅ | ✅ | Inbuilt | Done**** |
****Component active / inactive**** | ****❌ **** | ✅ | ****❌ | Inbuilt | Done**** |
****Rich Text Editor**** | ✅ | ✅ | ✅ | Inbuilt | Done**** |
****Upload File**** | ✅ | ✅ | ✅ | Inbuilt | Done**** |
****Number / Up down widget**** | ✅ | ✅ | ✅ | Inbuilt | Done**** |
****Telephone**** | ✅ | ✅ | ✅ | Inbuilt | Done**** |
****Currency**** | ✅ | ✅ | ✅ | Inbuilt | Done**** |
****Nested**** | ✅ | ✅ | ✅ | Inbuilt | Done**** |
****Password**** | ✅ | ✅ | ✅ | Inbuilt | Done**** |
****Checkbox**** | ✅ | ✅ | ✅ | Inbuilt | Done**** |
****Radio Button**** | ✅ | ✅ | ✅ | Inbuilt | Done**** |
****Rating Component**** | ✅ | ✅ | ✅ | Custom | Done**** |
More detailed example can be seen here and for usage on validations please see 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');
class Example extends React.Component {
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
}
onCancel = () => {
console.log('on reset being called');
}
onFormChanged = ({ formData }) => {
console.log('onFormChanged: ',formData); // eslint-disable-line no-console
}
onUpload = (value) => {
console.log('onUpload: ', value); // eslint-disable-line no-console
}
render() {
return (
<MaterialJsonSchemaForm
schema={schema}
uiSchema={uiSchema}
formData={formData}
onCancel={this.onCancel}
onSubmit={this.onSubmit}
onUpload={this.onUpload}
onChange={this.onFormChanged}
submitOnEnter
activityIndicatorEnabled
/>
);
}
}