`typescript
import { useForm } from "@metablock/react";

const form = useForm(
{
handleSubmit,
defaultValues,
fieldCallback,
},
[]
);
`

The handleSubmit function is an async function for handling form submissions, defaultValues are the initial/default values of the form and fieldCallback is an optional function for customizing props of form fields.

The optional callback function can be used to further customize the UI. The signature is

`typescript
const fieldCallback = (
name: str,
extraProps: Record
): Record => {
return extraProps;
};
`

where name is the input name and extraProps are the additional props passed to the original FormFromSchema component. If the function returns nothing for a given field name, the field is not displayed in the form.

Forms

The library has a tooling for rending Forms specified via JSON schema.

$3

The entry-point component for rendering forms from JSON schema

`js
import {FormFromSchema, useForm} from "@metablock/react";

const MyForm = () => {
const form = useForm({...});

return
};
`

The schema is a valid subset of the JSON schema. For example a simple name input can be defined as:

`json
{
"type": "object",
"properties": {
"name": {
"type": "string",
"minLength": 3,
"description": "Please enter your name",
"format": "optional format"
}
}
}
`

$3

This is a global object which controls how form fields are rendered. By defaults it provide the basic input fields, but it can be extended or overwritten if required.

`js
import { SchemaRegistry } from "@metablock/react";

SchemaRegistry.set("string", StringSchema);
SchemaRegistry.set("boolean", BooleanSchema);
SchemaRegistry.set("integer", NumberSchema);
SchemaRegistry.set("number", NumberSchema);
SchemaRegistry.set("object", ObjectSchema);
`

$3

This is a higher level component to render Forms with side actions. It uses the FormFromSchema component in conjunction with the useForm hook.

ApiDataGrid

A Component for rendering tabular data, it allows to fetch server side data via the ApiData` interface.

- uses react-data-grid