A `useForm` hook to handle forms within a React component using the hooks API

use-form.hook.js

import { useState } from 'react'

export const useForm = (initialValue, middlewareFn) => {
  const [data, setData] = useState(initialValue);
  const middleware =
    typeof middlewareFn === "function" ? middlewareFn : data => data;

  /*
      - onChange(event)
      uses the event target's `name` and `value` (or `checked` if the type of the target is "checkbox")
      to update the state's corresponding value
  
      - onChange(delta, shouldReplaceState)
      merges `delta` with the state or, if `shouldReplaceState` is true, replaces the state with
      delta altogether
  
      - onChange(name, value)
      sets the key with the name contained in `name` on the state to `value`
    */
  const onChange = (...args) => {
    if (args.length === 0) {
      return data;
    }

    const [maybeEvent] = args;

    if (maybeEvent.nativeEvent && maybeEvent.nativeEvent instanceof Event) {
      const [event] = args;

      const update = middleware({
        ...data,
        [event.target.name]:
          event.target.type === "checkbox"
            ? event.target.checked
            : event.target.value
      });

      setData(update);

      return update;
    }

    if (typeof maybeEvent === "object") {
      const [delta, shouldReplaceState] = args;
      const update = shouldReplaceState
        ? middleware(delta)
        : middleware({ ...data, ...delta });

      setData(update);

      return update;
    }

    const [name, value] = args;
    const update = middleware({
      ...data,
      [name]: value
    });

    setData(update);

    return update;
  };

  return [data, onChange];
};