react-form-catalog

React Form Catalog (RFC) 📋🚀

(ง︡'-'︠)ง WARNING : This library is under development (ALPHA). (ɔ◔‿◔)ɔ ♥

A powerful and easy tool to create forms for React applications.

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.

I. HOW IT WORKS ?

Here is the steps to create a new form:

1. Create your form catalog (i.e an array of fields and/or structures).

const FORM_CATALOG_SIMPLE_EXAMPLE: FormCatalogItem[] = [
  {
    id: "bitrate", // the field uniq key
    component: MuiText, // your field component
  },
];

2. Create a context variable

const context = useFormContextProvider(FORM_CATALOG_SIMPLE_EXAMPLE);

3. Call the form component and inject the context:

<FormFactoryComponent context={context}></FormFactoryComponent>

Thats all. Enjoy the form and the UI 👍.

II. MORE EXAMPLE

1. How to create custom field item component ?

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)}

2. How to change css of a component ?

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;
}