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
Usage
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!
let TodoView=React;
Editing
React Schema UI includes built-in editing functionality and acts as a controlled component.
Form
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 onChange
.
let TodoView=React;
Inline
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 onChangeProperty
.
Extensibility
Value Modifiers
It is not uncommon for raw data to need modification before presentation to the end user. RSUI supports value modifiers to handle these needs:
let TodoView=React;
Custom Viewers and Editors
Often custom viewers or editors are desired for dealing with specialized data types. For this, the viewers
and 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 ValueEditor
protocol.
let TodoView=React;
If more fine-grained control is needed, the renderValueViewer
and renderValueEditor
props will be called to render the respective component.
let renderCustomViewer = propertySchema value return <div id='#custom'>value</div>;; <ReactSchemaView schema=todoSchema renderValueViewer=renderCustomViewer />
ValueViewer and ValueEditor Protocol
The protocol is very simple:
- Viewers are provided with a
value
prop to be displayed. - Editors are provided an
onChange
prop that should be called when changes are made to the value.