formfusion NPM Version
LearnBlogPlayground

UseForm hook

Useform hook: Custom react hook designed for advanced form management.

UseForm is a specialized custom React 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

#

  • initialValuesRequired

  • 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 use 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({ initialValues: { username: '' }, onSubmit });

  return (
    <Form config={config} className="form">
      <Input
        id="username"
        name="username"
        type="username"
        label="Username"
        required
      />
      <button type="submit">Submit</button>
      Your username is {config.values.username}
    </Form>
  );
};

export default MyForm;