A React dynamic form component for react using JSON-Schema.
npm install react-json-editor#### This is a fork of plexus-form with the intent to keep it maintained
A dynamic form component for React using a
specification format based on JSON-Schema.
#### Demo
The full code for the demo can be found at
https://github.com/ismaelga/react-json-editor/blob/master/demos/demo.jsx.
react-json-editor takes a JavaScript object describing the shape of the data we want
a user to provide - a schema - and automatically creates a form based on
that schema. It also validates user inputs using the same schema.
I'm happy to accept PRs. You can pick up a TODO from https://github.com/ismaelga/react-json-editor/issues/1 if you want to help but don't know how.
``js
var React = require('react');
var Form = require('react-json-editor');
var schema = {
title : "My pretty form",
description: "Declarative pure data DSLs are the best.",
type : "object",
properties : {
comment: {
title : "Your comment",
description: "Type something here.",
type : "string",
minLength : 1
}
}
};
var onSubmit = function(data, buttonValue, errors) {
alert('Data : '+JSON.stringify(data)+'\n'+
'Button: '+buttonValue+'\n'+
'Errors: '+JSON.stringify(errors));
};
ReactDOM.render(
schema = {schema}
Differences between JSON-Schema and react-json-editor schemas:
react-json-editor take a plain JavaScript data object as input rather than a JSON-formatted
string.
The following JSON-Schema properties are supported:
-
description
- enum
- enumNames
- items
- oneOf
- properties
- title
- type
- $refAdditional properties relevant to data validation are implemented by
plexus-validate.
JSON-Schema references can only point to elements within the schema object
itself. URI references are not supported.
react-json-editor extends the JSON-Schema specification with two new properties
x-hints and x-ordering. The latter, x-ordering, specifies a default
order for the elements under the current object. The former, x-hints, can be
used to annotate a schema with additional hints on how the data is to be
handled or displayed. The relevant pieces of information for react-json-editor are
found under schema["x-hints"].form. We'll explore these extension in more
detail in the following sections.
Enforced display order example:
`js
var schema = {
type : "object",
properties: {
comment: { title: "Comment" },
email : { title: "Email" },
name : { title: "Name" }
},
"x-ordering": ["name", "email", "comment"]
};
`
Custom CSS classes example:
react-json-editor assigns the following CSS classes automatically:
-
form-section
- form-subsection
- form-section-title
- form-elementAdditional CSS classes can be specified via
x-hints like so:
`js
var schema = {
type : "object",
properties: {
name : {
title: "Name",
"x-hints": {
form: {
classes: [ "form-text-field", "form-name-field" ]
}
}
},
email: {
title: "Email",
"x-hints": {
form: {
classes: [ "form-text-field", "form-email-field" ]
}
}
}
},
"x-hints": {
form: {
classes: [ "form-person-section" ]
}
}
};
`Alternatives selection example:
`js
var schema = {
type : "object",
properties: {
contact: {
title : "Contact details",
description: "How would you like to be contacted?",
type : "object",
properties : {
contactType: {
title : "Contact medium",
description: "Please pick your preferred medium"
}
},
oneOf: [
{
properties: {
contactType: { enum: [ "Email" ] },
email : { title: "Email address" }
}
},
{
properties: {
contactType: { enum: [ "Telephone" ] },
phoneNumber: { title: "Telephone number" }
}
},
{
properties: {
contactType: { enum: [ "Physical mail" ] },
address : { title: "Street address" },
postcode : { title: "Post or area code" },
state : { title: "State or province" },
country : { title: "Country" }
}
}
],
"x-hints": { form: { selector: "contactType" } }
}
}
};
`User-defined input component example:
The following example shows how to associate a user-defined input handler with
a data element. The association happens indirectly via a symbolic name and a
handler object that assigns functions to names so that the schema itself
remains easily serializable. We use a very simplistic file uploader component
as a demonstration case. Other useful applications of these technique could be
an autocompleting text field or a color picker.The React component handling a data element (here
Uploader) must call
this.props.onChange whenever the data has changed. It should delegate
low-level key press events it does not handle itself to
this.props.onKeyPress, which enables the