react_json_forms_designer_quickstart_with_schema_state.ts

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