AutoForm

AutoForm is a dynamic form builder component for React applications, using Mantine. It generates forms dynamically based on a schema definition. This allows for faster form creation and less repetitive code when working with forms in your React applications.

Features

• Dynamic Form Rendering: AutoForm renders fields based on the provided schema, making form generation easy.
• Field Types Support: Supports various input types like text, number, password, select, checkbox, etc.
• Validation Support: Integrates with form validation mechanisms.
• Custom Layout: Supports custom layout rendering via the container and fieldContainer props.
• Read-Only Mode: Option to set the form in read-only mode.
• Field Customization: Easily customize field rendering for different input types.
• Conditional Rendering: Hide fields or conditionally render based on certain conditions.

Installation

To install AutoForm, you can use npm or yarn:

1npm install @mantine/core react

Usage

Example Usage

1import React from 'react';
2import AutoForm from './AutoForm';  // Path to your AutoForm component
3import { Button, Grid, Group } from '@mantine/core';
4
5const schema = [
6  { name: 'firstName', label: 'First Name', type: 'text' },
7  { name: 'age', label: 'Age', type: 'number' },
8  { name: 'subscribe', label: 'Subscribe?', type: 'checkbox' },
9  { name: 'role', label: 'Role', type: 'select', options: ['User', 'Admin'] },
10];
11
12const MyForm = () => {
13  const onSubmit = (values) => {
14    alert(JSON.stringify(values, null, 2));
15  };
16
17  return (
18    <AutoForm
19      schema={schema}
20      onSubmit={onSubmit}
21      container={(form, onSubmit, readOnly) => (
22        <>
23          <Grid>{form}</Grid>
24          {!readOnly && (
25            <Group justify="flex-end">
26              <Button onClick={onSubmit}>Submit</Button>
27            </Group>
28          )}
29        </>
30      )}
31    />
32  );
33};

Props

Prop	Type	Description
schema	FieldSchema[]	List of field definitions to render. Each field specifies name, type, etc.
values	Record<string, any>	Initial values for the form fields. Optional.
onSubmit	(values: Record<string, any>) => void	Callback triggered on form submission with current form values.
container	(form: ReactNode, onSubmit: () => void, readOnly?: true) => ReactNode	Custom render wrapper around the form and submit button.
fieldContainer	(field: ReactNode, fieldSchema: FieldSchema) => ReactNode	Optional. Custom layout for each field (e.g., grid wrappers).
customRender	FieldRenderCustomRender	Optional. Override how specific field types are rendered.
validate	FormValidateInput<Record<string, any>>	Optional validation logic. Uses Mantine-compatible validation.
readOnly	true	Optional. When true, disables all inputs (read-only mode).
onFieldChange	(name: string, value: any, values: Record<string, any>) => Record<string, any>	Optional. Modify or transform values when a field changes.

Custom Layout

You can customize the layout of the entire form or specific fields by using the container and fieldContainer props.

Example: Customizing the Form Layout

1const customLayout = (form, onSubmit, readOnly) => (
2  <>
3    <div className="form-container">{form}</div>
4    {!readOnly && <button onClick={onSubmit}>Submit</button>}
5  </>
6);

Example: Customizing Field Layout

1const customFieldLayout = (field, fieldSchema) => (
2  <div className="custom-field">{field}</div>
3);

Validation

AutoForm supports validation through the validate prop. You can pass a validation function that returns an object of validation errors.

Example:

1const validateForm = (values) => {
2  const errors = {};
3  if (!values.firstName) errors.firstName = 'First name is required';
4  if (!values.age) errors.age = 'Age is required';
5  return errors;
6};
7
8<AutoForm
9  schema={schema}
10  validate={validateForm}
11  onSubmit={(values) => console.log(values)}
12  container={(form, onSubmit) => (
13    <>
14      <Grid>{form}</Grid>
15      <Button onClick={onSubmit}>Submit</Button>
16    </>
17  )}
18/>

Hide Fields

To hide a field from rendering, you can set the hidden property in the schema.

Example:

1const schema = [
2  { name: 'firstName', label: 'First Name', type: 'text' },
3  { name: 'internalCode', label: 'Internal Code', type: 'text', hidden: true },
4];

This will ensure the "Internal Code" field is not rendered.

---

Contributing

1. Fork the repository
2. Create a new branch (git checkout -b feature-branch)
3. Commit your changes (git commit -am 'Add feature')
4. Push to the branch (git push origin feature-branch)
5. Create a new Pull Request

---

License

Distributed under the MIT License. See LICENSE for more information.