DynamicForm

DynamicForm is a flexible and UI-agnostic dynamic form generator for React. It automatically creates form fields based on a Yup schema, using Formik under the hood.
All UI components (textboxes, date pickers, radios, grids, etc.) are fully customizable through a provider, allowing the form to work with any component library (Material UI, Chakra, custom components, etc.).

🚀 Features

• ✔️ Generate forms automatically from a Yup schema
• ✔️ Built-in support for Formik
• ✔️ UI-agnostic through a DynamicFormProvider
• ✔️ Override individual fields using <DynamicFormField />
• ✔️ Hide fields or hide submit button
• ✔️ Supports custom render children
• ✔️ Supports arrays, lists, booleans, radios, dates, textboxes, grids, etc.

📦 Installation

npm install dynamic-form
# or
yarn add dynamic-form

---

## 🔧 Basic Usage

```jsx
import * as yup from "yup";
import { DynamicForm } from "dynamic-form";

const schema = yup.object({
  name: yup.string().required(),
  age: yup.number().required(),
});

export default function Example() {
  return (
    <DynamicForm
      schema={schema}
      initialValues={{ name: "", age: "" }}
      onSubmit={(values) => console.log(values)}
    />
  );
}

This automatically generates all fields defined in your Yup schema.

🔌 Provider Configuration

DynamicForm uses a provider to stay independent from any UI framework. You must wrap your application (or the part where the form is used) inside:

import {
  DynamicFormProvider,
  DynamicForm,
  DynamicFormField,
} from "dynamic-form";

function App() {
  return (
    <DynamicFormProvider
      array={() => <>Configure your own!</>}
      boolean={() => <>Configure your own!</>}
      list={() => <>Configure your own!</>}
      date={(props) => <DatePicker variant="outlined" {...props} />}
      radio={({
        name,
        value,
        label,
        error,
        options,
        helperText,
        onChange,
      }) => (
        <FormControl error={error}>
          <FormLabel>{label}</FormLabel>
          <RadioGroup
            aria-label={label}
            name={name}
            value={value}
            onChange={onChange}
          >
            {options.map((item, index) => (
              <FormControlLabel
                key={index}
                value={item.value}
                checked={item.value === value}
                control={<Radio />}
                label={item.label}
              />
            ))}
          </RadioGroup>
          {error && <FormHelperText>{helperText}</FormHelperText>}
        </FormControl>
      )}
      grid={({ children, ...props }) => (
        <Grid item {...props}>
          {children}
        </Grid>
      )}
      textbox={({
        name,
        value,
        label,
        error,
        type,
        placeholder,
        multiline,
        rows,
        required,
        onChange,
        onBlur,
      }) => (
        <input type={type}>
            ...
        </>
      )}
      submitButton={({ label, submitForm }) => (
        <button onClick={submitForm}>{label}</button>
      )}
    >
      {/* Your app here */}
    </DynamicFormProvider>
  );
}

🎨 Custom Fields With

If you want to hide auto-generated fields (noField) and manually place fields:

<DynamicForm schema={schema} initialValues={{}} noField>
  {({values, errors, ...allFormikFields}) => (
    <>
      <DynamicFormField field="name" />
      <DynamicFormField field="age" />
    </>
  )}
</DynamicForm>

This allows full control over layout and field placement.

🧩 Custom Submit Button

If you pass noButton, you can place the button manually:

<DynamicForm schema={schema} initialValues={{}} noButton>
  {(form) => (
    <>
      <DynamicFormField field="name" />
      <button onClick={form.submitForm}>Save</button>
    </>
  )}
</DynamicForm>

↔️ Supported Field Types

These depend on what you define in the provider:

• textbox
• date
• radio
• boolean
• array
• list
• grid
• submitButton

You can provide any UI component as long as it accepts the props sent by DynamicForm.

🧱 Example Yup Schema

const schema = yup.object().shape({
  name: yup.string().required("Name is required"),
  birthDate: yup.date().required(),
  gender: yup.string().oneOf(["male", "female"]),
  notes: yup.string().nullable(),
});

DynamicForm will generate the appropriate fields based on the schema definitions.

🏁 Conclusion

DynamicForm gives you the power of automatic form generation without locking you to a UI library. Define your schema, configure your provider, and you're ready to build powerful, declarative forms.

If you want help generating more examples, TypeScript typings, or a demo project, just let me know!