Dynamic form package
npm install @invenso/dynamic-formDynamicForm 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.).
---
- ✔️ Generate forms automatically from a Yup schema
- ✔️ Built-in support for Formik
- ✔️ UI-agnostic through a DynamicFormProvider
- ✔️ Override individual fields using
- ✔️ Hide fields or hide submit button
- ✔️ Supports custom render children
- ✔️ Supports arrays, lists, booleans, radios, dates, textboxes, grids, etc.
---
```bash
npm install dynamic-formor
yarn add dynamic-form
---
`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 (
initialValues={{ name: "", age: "" }}
onSubmit={(values) => console.log(values)}
/>
);
}
``
This automatically generates all fields defined in your Yup schema.
---
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:
`jsx
import {
DynamicFormProvider,
DynamicForm,
DynamicFormField,
} from "dynamic-form";
function App() {
return (
boolean={() => <>Configure your own!}
list={() => <>Configure your own!}
date={(props) =>
radio={({
name,
value,
label,
error,
options,
helperText,
onChange,
}) => (
name={name}
value={value}
onChange={onChange}
>
{options.map((item, index) => (
value={item.value}
checked={item.value === value}
control={
label={item.label}
/>
))}
{error &&
)}
grid={({ children, ...props }) => (
{children}
)}
textbox={({
name,
value,
label,
error,
type,
placeholder,
multiline,
rows,
required,
onChange,
onBlur,
}) => (
...
)}
submitButton={({ label, submitForm }) => (
)}
>
{/ Your app here /}
);
}
`
---
If you want to hide auto-generated fields (noField) and manually place fields:
`jsx`
{({values, errors, ...allFormikFields}) => (
<>
)}
This allows full control over layout and field placement.
---
If you pass noButton, you can place the button manually:
`jsx`
{(form) => (
<>
)}
---
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.
---
`jsx``
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.
---
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!