What is React Schema UI?
Build schema-driven UIs, in seconds.
React Schema UI offers:
- Outputs beautiful, semantic viewers and editors
- Plain JSON schemas offer portability and flexible output
- Easy to style with CSS
- Extensible viewers/editors
Install the package
npm install react-schema-ui -S
Import sensible CSS default
Provide a schema
// The schema describes the value that should be displayedvar schemaDefinition=schemaType : 'object'properties:schemaType: 'property'name: 'title'type: 'string';
Generate a UI!
React Schema UI includes built-in editing functionality and acts as a controlled component.
The default editing mode,
form, behaves like a traditional HTML form; that is, all value containers are rendered as editable and changes are submitted as a whole to
All value containers are rendered as readable and editable. When touched or clicked, the
editable value container enters the
editing state. This mode aims to keep only a single value container in the editing state at any given time.
When changes are committed, the change will be passed along immediately via
It is not uncommon for raw data to need modification before presentation to the end user. RSUI supports value modifiers to handle these needs:
Custom Viewers and Editors
Often custom viewers or editors are desired for dealing with specialized data types. For this, the
editors props can be used to provide custom components for viewing and editing data.
These components must conform to the
ValueViewer protocol and if needed, the
If more fine-grained control is needed, the
renderValueEditor props will be called to render the respective component.
let renderCustomViewer = propertySchema valuereturn <div id='#custom'>value</div>;;<ReactSchemaViewschema=todoSchemarenderValueViewer=renderCustomViewer />
ValueViewer and ValueEditor Protocol
The protocol is very simple:
- Viewers are provided with a
valueprop to be displayed.
- Editors are provided an
onChangeprop that should be called when changes are made to the value.