react_json_forms_designer_quickstart_with_schema_state.ts

1import React, { useState } from 'react';
2import { JsonFormsDesigner } from '@dwidge/json-forms-designer-react';
3import { JsonSchema, UISchemaElement } from '@jsonforms/core';
4
5const initialSchema: JsonSchema = {
6  type: 'object',
7  properties: {
8    name: {
9      type: 'string',
10      minLength: 3,
11    },
12    age: {
13      type: 'integer',
14    },
15  },
16};
17
18const initialUiSchema: UISchemaElement = {
19  type: 'VerticalLayout',
20  elements: [
21    {
22      type: 'Control',
23      scope: '#/properties/name',
24    },
25    {
26      type: 'Control',
27      scope: '#/properties/age',
28    },
29  ],
30};
31
32export const App = () => {
33  const [schema, setSchema] = useState<JsonSchema>(initialSchema);
34  const [uiSchema, setUiSchema] = useState<UISchemaElement>(initialUiSchema);
35
36  return (
37    <div style={{ height: '100vh', width: '100%' }}>
38      <JsonFormsDesigner
39        schema={schema}
40        uiSchema={uiSchema}
41        onChange={(newSchema, newUiSchema) => {
42          setSchema(newSchema);
43          setUiSchema(newUiSchema);
44        }}
45      />
46    </div>
47  );
48};
49
50export default App;