@zohodesk/form-hooks

#UNIFIED COMPONENTS LIBRARY - form-hooks

This is a custom React hook called useFormHook that can be used to manage the state of a form in a React component.

The hook takes two arguments: props and reducer. props is an optional object that represents the initial state of the form, while reducer is a function that takes the current state and an action and returns a new state.

The hook uses the useCommonReducer hook, which is a custom implementation of the useReducer hook that allows for more complex state updates. It passes in the formReducer function as the reducer function, which is responsible for updating the form state based on the dispatched actions.

The initial state of the form is defined as an object with two properties: formState and errors. The formState property represents the current state of the form, while the errors property represents any validation errors that occur during form submission.

The hook returns an object with four properties: register, handleSubmit, formState, errors, and updateFieldValue.

register is a function that takes a field name and an optional initial value and adds it to the form state. If the field already exists in the form state, the function does nothing. handleSubmit is a function that takes the current form state and returns it. This function can be called when the form is submitted to retrieve the current state of the form. formState is the current state of the form, which is an object that contains the values of all fields in the form. errors is an object that contains any validation errors that occur during form submission. updateFieldValue is a function that takes a field name and a new value and updates the form state with the new value for the specified field. This function is called when a field in the form is updated. Overall, this custom hook can be used to simplify the management of form state in a React component and provide a consistent way to handle form submissions and field updates.

here's a simple example of how to use the useFormHook in a React component:

import React from 'react';
import useFormHook from './useFormHook';

function MyForm() {
  const { formState, errors, register, updateFieldValue, handleSubmit } = useFormHook();

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    updateFieldValue({ name, value });
  };

  const handleFormSubmit = (event) => {
    event.preventDefault();
    const formData = handleSubmit();
    console.log(formData);
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input type="text" name="firstName" onChange={handleInputChange} />
      <input type="text" name="lastName" onChange={handleInputChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, the MyForm component uses the useFormHook to manage the state of the form. The hook provides the formState and errors variables, which represent the current state of the form and any validation errors that occur during submission, respectively.

The component also uses the register function to add the firstName and lastName fields to the form state when the component is mounted. The updateFieldValue function is called when the user enters input into either field, which updates the form state with the new input.

Finally, the component uses the handleSubmit function to retrieve the current form state when the form is submitted, which logs the form data to the console.

1.0.0

• Package published