\n {/* Render the ControlDefinition using `data` for the form state */}\n {renderControl(controlDefinition, data, {\n fields: simpleSchema,\n renderer,\n hooks: defaultFormEditHooks,\n })}\n
\n );\n}\n```\n\n\nThis will produce this UI:\n\n{JSON.stringify(data.value, null, 2)}\n ![](\"../../images/schemas.png\")
\n\n## Schema Fields and Control Definitions\n\n### `SchemaField`\n\nA `SchemaField` is a JSON object which describes the definition of a field inside the context of a JSON object. Each `SchemaField` must have a field name and a `FieldType` which will map to JSON. The following built in types are defined with these JSON mappings:\n\n* `String` - A JSON string\n* `Bool` - A JSON boolean\n* `Int` - A JSON number\n* `Double` - A JSON number\n* `Date` - A date stored as 'yyyy-MM-dd' in a JSON string\n* `DateTime` - A date and time stored in ISO8601 format in a JSON string\n* `Compound` - A JSON object with a list of `SchemaField` children\n\nEach `SchemaField` can also be marked as a `collection` which means that it will be mapped to a JSON array of the defined `FieldType`.\n\n### Defining fields\n\nWhile you can define a `SchemaField` as plain JSON, e.g. \n```json\n[\n {\n \"type\": \"String\",\n \"field\": \"firstName\",\n \"displayName\": \"First Name\"\n },\n {\n \"type\": \"String\",\n \"field\": \"lastName\",\n \"displayName\": \"Last Name\",\n \"required\": true\n },\n {\n \"type\": \"Int\",\n \"field\": \"yearOfBirth\",\n \"displayName\": \"Year of birth\",\n \"defaultValue\": 1980\n }\n]\n```\n\nHowever if you have existing types which you would like to define `SchemaField`s for the library contains a function called `buildSchema` a type safe way of generating fields for a type:\n\n```tsx\ninterface SimpleForm {\n firstName: string;\n lastName: string;\n yearOfBirth: number;\n}\n\nconst simpleSchema = buildSchema![](\"../../images/schemas-option.png\")
\n\n### `ControlDefinition`\n\nA `ControlDefinition` is a JSON object which describes what should be rendered in a UI. Each `ControlDefinition` can be one of 4 distinct types:\n\n* `DataControlDefinition` - Points to a `SchemaField` in order to render a control for editing of data.\n* `GroupedControlsDefinition` - Contains an optional title and a list of `ControlDefinition` children which should be rendered as a group. Optionally can refer to a `SchemaField` with type `Compound` in order to capture nested data.\n* `DisplayControlDefinition` - Render readonly content, current text and HTML variants are defined.\n* `ActionControlDefinition` - Renders an action button, useful for hooking forms up with outside functionality.\n\nIf you don't care about the layout of the form that much you can generate the definition automatically by using `useControlDefinitionForSchema()`.\n\nTODO renderOptions, DataRenderType for choosing render style.\n\n## Form Renderer\n\nThe actual rendering of the UI is abstracted into an object which contains functions for rendering the various `ControlDefinition`s and various parts of the UI:\n\n\n\n```tsx\nexport interface FormRenderer {\n renderData: (props: DataRendererProps) => ReactElement;\n renderGroup: (props: GroupRendererProps) => ReactElement;\n renderDisplay: (props: DisplayRendererProps) => ReactElement;\n renderAction: (props: ActionRendererProps) => ReactElement;\n renderArray: (props: ArrayRendererProps) => ReactElement;\n renderLabel: (props: LabelRendererProps, elem: ReactElement) => ReactElement;\n renderVisibility: (visible: Visibility, elem: ReactElement) => ReactElement;\n renderAdornment: (props: AdornmentProps) => AdornmentRenderer;\n}\n```\n\n\nThe `createFormRenderer` function takes an array of `RendererRegistration` which allows for customising the rendering.\n\n\n\n```tsx\nexport type RendererRegistration =\n | DataRendererRegistration\n | GroupRendererRegistration\n | DisplayRendererRegistration\n | ActionRendererRegistration\n | LabelRendererRegistration\n | ArrayRendererRegistration\n | AdornmentRendererRegistration\n | VisibilityRendererRegistration;\n```\n\n\nProbably the most common customisation would be to add a `DataRendererRegistration` which will change the way a `DataControlDefinition` is rendered for a particular FieldType:\n\n\n\n```tsx\nexport interface DataRendererRegistration {\n type: \"data\";\n schemaType?: string | string[];\n renderType?: string | string[];\n options?: boolean;\n collection?: boolean;\n match?: (props: DataRendererProps) => boolean;\n render: (\n props: DataRendererProps,\n defaultLabel: (label?: Partial![](\"../../images/schemas-muifield.png\")
\n\n## TODO\n\n* Label rendering\n* Visibility\n* Arrays\n* Display controls\n\n","readmeFilename":"README.md"}