@jsonforms/material-renderers 3.0.0-beta.2 → 3.0.0-beta.5

package/README.md

@@ -10,7 +10,7 @@ This is the JSON Forms Material Renderers Package. This package only contains re
 
 See the official [documentation](https://jsonforms.io/docs/integrations/react/) and the JSON Forms React [seed repository](https://github.com/eclipsesource/jsonforms-react-seed) for examples on how to integrate JSON Forms with your application.
 
-You can combine [JSON Forms React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react) with other renderers too, for example with the [Vanilla Renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers).
+You can combine [JSON Forms React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react) with other renderers too, for example with the [Vanilla Renderers](https://github.com/eclipsesource/jsonforms/tree/master/packages/vanilla).
 
 Check <https://www.npmjs.com/search?q=%40jsonforms> for all published JSONForms packages.
 
@@ -24,24 +24,78 @@ npm i --save @jsonforms/core @jsonforms/react @jsonforms/material-renderers
 
 Use the `JsonForms` component for each form you want to render and hand over the renderer set.
 
-```js
+
+```ts
 import React, { useState } from 'react';
+import {
+  materialRenderers,
+  materialCells
+} from '@jsonforms/material-renderers';
 import { JsonForms } from '@jsonforms/react';
-import { materialCells, materialRenderers } from '@jsonforms/material-renderers';
+
+const schema = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      minLength: 1
+    },
+    done: {
+      type: 'boolean'
+    },
+    due_date: {
+      type: 'string',
+      format: 'date'
+    },
+    recurrence: {
+      type: 'string',
+      enum: ['Never', 'Daily', 'Weekly', 'Monthly']
+    }
+  },
+  required: ['name', 'due_date']
+};
+
+const uischema = {
+  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/recurrence'
+        }
+      ]
+    }
+  ]
+};
+
+const initialData = {};
 
 function App() {
   const [data, setData] = useState(initialData);
   return (
-    <div className='App'>
-      <JsonForms
-        schema={schema}
-        uischema={uischema}
-        data={data}
-        renderers={materialRenderers}
-        cells={materialCells}
-        onChange={({ data, _errors }) => setData(data)}
-      />
-    </div>
+    <JsonForms
+      schema={schema}
+      uischema={uischema}
+      data={data}
+      renderers={materialRenderers}
+      cells={materialCells}
+      onChange={({ data, _errors }) => setData(data)}
+    />
   );
 }
 ```
@@ -62,3 +116,7 @@ If you encounter any problems feel free to [open an issue](https://github.com/ec
 For questions and discussions please use the [JSON Forms board](https://jsonforms.discourse.group).
 You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms).
 In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms.
+
+## Migration
+
+See our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) when updating JSON Forms.