react-schemaform

React schema form

Light weight react components for rendering forms based on JSON Schema

Using dependency injection to support multiple rendering themes/libraries. Easily extendable by replacing some or all rendering components. Inspired by libraries like json-schema-form.

Getting started

Install

npm install react-schemaform --save

Usage

import SchemaForm from 'react-schemaform';

const schema = {
    title: 'Test schema',
    type: 'object',
    properties: {
        name: { type: 'string' },
        age: { type: 'integer' }
    }
};

const value = {
    name: 'John Doe',
    age: 42
};

<SchemaForm
    schema={ schema }
    value={ value }
    onChange={ value => console.info('Form change', value) }
/>

Status

Work in progress

TODO

• Inline validation
• Unsupported validation keywords (list below)

JSON Schema feature support

Schema keywords supported

• title

• description

• type

  • string
  • number
  • integer
  • boolean
  • null
  • array
  • object

• maxLength (counter)

• items (schema object)

• items (array of schemas)

• properties

• additionalProperties

• const

• format

  • date-time
  • email
  • hostname
  • ipv4
  • ipv6
  • uri
  • uri-reference
  • uri-template
  • json-pointer

• readOnly

• multipleOf

• maximum

• exclusiveMaximum

• minimum

• exclusiveMinimum

• maxLength

• minLength

• pattern

• additionalItems

• maxItems

• minItems

• uniqueItems

• contains

• maxProperties

• minProperties

• required

• patternProperties

• dependencies

• propertyNames

• enum

• allOf

• anyOf

• oneOf

• not

Rendering frameworks

• Basic (no framework)
• Material UI (WIP)