FormFusion: Easy form handling, validation & more

UseForm hook

UseForm is a specialized custom hook designed for advanced form management, serving as the foundational core for the Form component. This hook comes in handy when you require greater control over your forms, offering access to essential objects such as values and errors. It's particularly valuable when you opt for alternative Field components that differ from FormFusion's default Input and Textarea components. With UseForm, you can tailor your form management to your specific needs, ensuring a flexible and adaptable solution for your web development projects.

Available parameters

onSubmitRequired
This parameter defines the function that is executed when the form is submitted. It plays a crutial role in form handling by returning the values object, which encapsulates all the field values.
Type: function

initialValues
The initialValues parameter allows you to specify the default values for the form fields.
Type: { [field: string]: string }

validateOnChange
Determine whether the form should initiate validation and display errors in real-time while typing.
Default: false
Type: boolean

validateOnBlur
Determine whether the form should initiate validation and display errors when a field loses focus.
Default: true
Type: boolean

Available configuration

The UseForm hook yields the entire form configuration, which you can utilize to tailor your form management precisely as desired. Here's an example of how to implement it:

const config = useForm({onSubmit: (values) => {console.log(values)}});

In the provided code snippet, the config variable includes the following essential configuration parameters:

values
This object encapsulates the data entered into the form fields. Each field key should correspond to the 'name' attribute of the associated form input.
Type: { [field: string]: string }

errors
This object contains error messages relating to to each field that has invalid data. Field keys should align with the 'name' attribute of each form input element.
Type: { [field: string]: string }

touched
This object records all fields that have been interacted with. Each field key should align with the 'name' attribute of the form input.
Type: { [field: string]: string }

setFieldValue
This function allows using custom form fields that are not using the Input or Textarea components
Type: (key: string, value: any) => void

resetForm
This function offers the capability to reset the form, providing a clean slate for data entry and submission.
Type: () => void

Example

import { Form, Input, useForm } from 'formfusion';
import './App.css';

const MyForm = () => {
  const onSubmit = (data: object) => {
    console.log('Success ' + JSON.stringify(data));
  };

  const config = useForm({ onSubmit });

  return (
    <Form config={config} className="form">
      <Input
        id="username"
        name="username"
        type="username"
        label="Username"
        required
        classes={{
          field: 'input-field',
          label: 'input-field__label',
          error: 'input-field__error-message',
        }}
        validation={{
          patternMismatch: 'Please match the requested format.',
          valueMissing: 'This field is required.',
        }}
      />
      Your username is {config.values.username}
      <button type="submit">Submit</button>
    </Form>
  );
};

export default MyForm;