React Integration

ATTENTION

As of JSON Forms 2.5 the React-Redux variant is deprecated in favor of the JSON Forms "standalone" component. The standalone component can still be used in combination with Redux like any other React component. See our migration guide for more information. For the legacy Redux integration, see here.

The JsonForms component takes the following props:

• schema: The JSON schema that describes the underlying data
• uischema: The UI schema that describes how the form should be rendered. If none is provided a default generated layout is used
• data: The data to be rendered
• renderers: The renderers that should be used for rendering the form
• cells: The cells that should be used for rendering the form
• onChange: A callback which is called on each data change, containing the updated data and the validation result.
• config: The default options element for all ui schema elements
• uischemas: A list of UI schemas to be used for specific schema elements
• readonly: If set to true, the component will be rendered in its disabled state.

<JsonForms
  schema={schema}
  uischema={uischema}
  data={data}
  renderers={materialRenderers}
  cells={materialCells}
  onChange={({ errors, data }) => setData(data)}
/>

schema

The schema prop expects a JSON Schema value describing the underlying data for the form. If the schema is not provided, JSON Forms can generate one for you, as long as a data prop is available. You can see a generated schema example in our Examples section. The generated schema is useful for rapid prototyping, but generally it is preferred to provide your own schema.

An example schema could look like this:

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      minLength: 1,
    },
    description: {
      type: 'string',
    },
    done: {
      type: 'boolean',
    },
    due_date: {
      type: 'string',
      format: 'date',
    },
    rating: {
      type: 'integer',
      maximum: 5,
    },
    recurrence: {
      type: 'string',
      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
    },
    recurrence_interval: {
      type: 'integer',
    },
  },
  required: ['name', 'due_date'],
};

uischema

The uischema prop is a JSON describing the layout of the form. It can contain different UI schema elements, such as layouts and controls as well as rules for dynamically controlling different features of the UI elements based on data. You can find more information on the different UI elements and rules here.

If no UI schema is provided, JSON Forms will generate one for you. You can find an example of a generated UI schema in our Examples section.

An example UI schema for the schema defined above could look like this:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "label": false,
      "scope": "#/properties/done"
    },
    {
      "type": "Control",
      "scope": "#/properties/name"
    },
    {
      "type": "HorizontalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/due_date"
        },
        {
          "type": "Control",
          "scope": "#/properties/rating"
        }
      ]
    },
    {
      "type": "Control",
      "scope": "#/properties/description",
      "options": {
        "multi": true
      }
    },
    {
      "type": "HorizontalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/recurrence"
        },
        {
          "type": "Control",
          "scope": "#/properties/recurrence_interval",
          "rule": {
            "effect": "HIDE",
            "condition": {
              "scope": "#/properties/recurrence",
              "schema": {
                "const": "Never"
              }
            }
          }
        }
      ]
    }
  ]
}

data

The data prop represents an object containing the data to be rendered in the form.

The data given to JSON Forms can be updated when necessary, for example when clearing a form:

const initialData = {
  name: 'Max Power',
};

const ClearFormExample = () => {
  const [data, setData] = useState(initialData);

  return (
    <div>
      <JsonForms
        schema={schema}
        uischema={uischema}
        data={data}
        renderers={materialRenderers}
        cells={materialCells}
        onChange={({ data, _errors }) => setData(data)}
      />
      <Button onClick={() => setData({})} color='primary'>
        Clear form data
      </Button>
    </div>
  );
};

renderers

With the renderers prop you can supply the renderers that should be used for rendering the form. You can choose one of the renderer sets already provided by JSON Forms or supply your own renderers.

cells

Cells are a second renderer set, intended to be used for simpler use cases than renderers, i.e. rendering inputs without labels and validation messages. In the @jsonforms/material-renderers they are used for rendering table cells. In the @jsonforms/vanilla-renderers they are used both for rendering table cells as well as the inner content of the regular renderers, i.e. the integer renderer will use an integer cell.

You can use the cell renderers provided by one of the available renderer sets or supply your own custom ones.

onChange

A callback which is called on each data change, containing the updated data and the validation result. JSON Forms will immediately produce an event with the results of the initial validation, even before the inputs of the form are changed.

config

You can configure some options available for all UI schema elements via the config prop:

• restrict: boolean value specifying whether the number of characters should be restricted to 'maxLength' specified in the JSON schema
• trim: boolean value indicating whether the control shall grab full width.
• showUnfocusedDescription: boolean value specifying whether the input descriptions should be shown even when the input is not focused
• hideRequiredAsterisk: boolean value specifying whether the asterisks shown in labels for required inputs should be hidden

The default config used by JSON Forms looks like this:

defaultConfigOptions = {
 restrict: false,
 trim: false,
 showUnfocusedDescription: false,
 hideRequiredAsterisk: false
}

When an UI schema element defines one of these properties in their options object, it will have a higher precedence.

uischemas

The uischemas prop can be used to register a list of UI schemas and corresponding testers that will be used whenever a 'detail' UI schema shall be rendered (for example in array and object renderers). This is useful when you need some kind of dynamic dispatching of uischemas.

readonly

If set to true, all renderers will be instructed to render in a disabled state.