Chakra Renderer Set for JSON Forms
npm install @reactjsonforms/chakra-renderersbash
npm i --save @reactjsonforms/core @reactjsonforms/react @reactjsonforms/chakra-renderers
`
Use the JsonForms component for each form you want to render and hand over the renderer set.
`js
import React, { useState } from 'react';
import { JsonForms } from '@reactjsonforms/react';
import { cells, renderers } from '@reactjsonforms/chakra-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 (
schema={schema}
uischema={uischema}
data={data}
renderers={renderers}
cells={cells}
onChange={({ data, _errors }) => setData(data)}
/>
);
}
``