remix-validated-form/browser/userFacingFormContext.js

Form component and utils for easy form validation in remix

import { useCallback, useMemo } from "react";
import { useInternalFormContext, useRegisterReceiveFocus, } from "./internal/hooks";
import { useFormHelpers, useFormState } from "./unreleased/formStateHooks";
/**
 * Provides access to some of the internal state of the form.
 */
export const useFormContext = (formId) => {
    // Try to access context so we get our error specific to this hook if it's not there
    const context = useInternalFormContext(formId, "useFormContext");
    const state = useFormState(formId);
    const { clearError: internalClearError, setTouched, validateField, clearAllErrors, validate, reset, submit, getValues, } = useFormHelpers(formId);
    const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
    const clearError = useCallback((...names) => {
        names.forEach((name) => {
            internalClearError(name);
        });
    }, [internalClearError]);
    return useMemo(() => ({
        ...state,
        setFieldTouched: setTouched,
        validateField,
        clearError,
        registerReceiveFocus,
        clearAllErrors,
        validate,
        reset,
        submit,
        getValues,
    }), [
        clearAllErrors,
        clearError,
        registerReceiveFocus,
        reset,
        setTouched,
        state,
        submit,
        validate,
        validateField,
        getValues,
    ]);
};