RFC follow these principles:
- Fast: create your form in just a few minutes.
- Easy to use and developper friendly: The tool is design to be simple and intuitive. A lot of examples are provided.
- No boilerplate: you define a catalog and RFC do the rest.
- Full dynamic: fields interacts which each others. You can change dynamically value, validators, display etc.
- Fully personalisable: you can use every field you want, and display them like you want.
Here is the steps to create a new form:
const FORM_CATALOG_SIMPLE_EXAMPLE: FormCatalogItem[] = [
{
id: "bitrate", // the field uniq key
component: MuiText, // your field component
},
];
const context = useFormContextProvider(FORM_CATALOG_SIMPLE_EXAMPLE);
<FormFactoryComponent context={context}></FormFactoryComponent>
Thats all. Enjoy the form and the UI 👍.
a. You have to give the form context to your component (ex: props.useFbContext)
import { TextField } from "@mui/material";
import React from "react";
export function MuiText(props: any) {
return (
<>
{
<TextField
margin="dense"
variant="outlined"
size="small"
/** order is important for overriding: put it after all the other attributes */
{...props.useFbContext.muiItemAttributes(props)}
/>
}
</>
);
}
b. Add this to your field component
{...props.useFbContext.muiItemAttributes(props)}
Each catalog item have an id. This id is attached to the generated component. For example:
export const catalog: FormCatalogItem[] = [
{
id: "myField",
component: MuiText,
},
];
Will generate this html code:
<input id="myField" type="text" data-testid="mew" value="" (...) />
So if you want for example to add a border red, you have to do this:
#myField {
border: red;
}