@conform-to/react/dist/future/hooks.d.ts

Conform view adapter for react

import { type FormValue, type Serialize, type SubmissionResult } from '@conform-to/dom/future';
import { useEffect } from 'react';
import type { FormContext, Control, Selector, UseFormDataOptions, ValidateHandler, ErrorHandler, SubmitHandler, FormState, FormRef, BaseControlProps, StandardControlOptions, DefaultControlValue, CheckedControlOptions, CustomControlOptions } from './types';
export declare const INITIAL_KEY = "INITIAL_KEY";
export declare const GlobalFormsObserverContext: import("react").Context<{
    onFieldUpdate(callback: (event: {
        type: "input" | "reset" | "mutation";
        target: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
    }) => void): () => void;
    onFormUpdate(callback: (event: {
        type: "submit" | "input" | "reset" | "mutation";
        target: HTMLFormElement;
        submitter?: HTMLInputElement | HTMLButtonElement | null;
    }) => void): () => void;
    onInternalUpdate(callback: (event: {
        target: HTMLFormElement;
    }) => void): () => void;
    dispose(): void;
}>;
export declare const FormContextContext: import("react").Context<FormContext<any>[]>;
/**
 * Preserves form field values when its contents are unmounted.
 * Useful for multi-step forms and virtualized lists.
 *
 * See https://conform.guide/api/react/future/PreserveBoundary
 */
export declare function PreserveBoundary(props: {
    /**
     * A unique name for the boundary within the form. Used to ensure proper
     * unmount/remount behavior and to isolate preserved inputs between boundaries.
     */
    name: string;
    /**
     * The id of the form to associate with. Only needed when the boundary
     * is rendered outside the form element.
     */
    form?: string;
    children: React.ReactNode;
}): React.ReactElement;
export declare function useFormContext(formId?: string): FormContext;
/**
 * Core form hook that manages form state, validation, and submission.
 * Handles both sync and async validation, intent dispatching, and DOM updates.
 */
export declare function useConform<FormShape extends Record<string, any>, ErrorShape, Value = undefined, SchemaValue = undefined, SchemaErrorShape = unknown>(formRef: FormRef, options: {
    key?: string | undefined;
    defaultValue?: Record<string, FormValue> | null | undefined;
    serialize: Serialize;
    intentName: string;
    lastResult?: SubmissionResult<NoInfer<ErrorShape>> | null | undefined;
    onValidate?: ValidateHandler<ErrorShape, Value, SchemaValue, SchemaErrorShape> | undefined;
    onError?: ErrorHandler<ErrorShape> | undefined;
    onSubmit?: SubmitHandler<FormShape, NoInfer<ErrorShape>, NoInfer<Value>> | undefined;
}): [FormState<ErrorShape>, (event: React.FormEvent<HTMLFormElement>) => void];
/**
 * A React hook that lets you sync the state of an input and dispatch native form events from it.
 * This is useful when emulating native input behavior — typically by rendering a hidden base control
 * and syncing it with a custom input.
 *
 * **Example:**
 * ```ts
 * const control = useControl(options);
 * ```
 */
export declare function useControl<Value, DefaultValue>(options: CustomControlOptions<Value, DefaultValue>): Control<Value, DefaultValue, Value>;
export declare function useControl<Value extends DefaultControlValue>(options?: StandardControlOptions<Value>): Control<Value>;
export declare function useControl(options: CheckedControlOptions): Control<boolean, string>;
/**
 * A React hook that lets you subscribe to the current `FormData` of a form and derive a custom value from it.
 * The selector runs whenever the form's structure or data changes, and the hook re-renders only when the result is deeply different.
 *
 * Returns `undefined` when the form element is not available (e.g., on SSR or initial client render),
 * unless a `fallback` is provided.
 *
 * See https://conform.guide/api/react/future/useFormData
 *
 * **Example:**
 * ```ts
 * const value = useFormData(
 *   formRef,
 *   formData => formData.get('fieldName') ?? '',
 * );
 * ```
 */
export declare function useFormData<Value>(formRef: FormRef, select: Selector<FormData, Value>, options: UseFormDataOptions<Value> & {
    acceptFiles: true;
    fallback: Value;
}): Value;
export declare function useFormData<Value>(formRef: FormRef, select: Selector<FormData, Value>, options: UseFormDataOptions & {
    acceptFiles: true;
}): Value | undefined;
export declare function useFormData<Value>(formRef: FormRef, select: Selector<URLSearchParams, Value>, options: UseFormDataOptions<Value> & {
    acceptFiles?: false;
    fallback: Value;
}): Value;
export declare function useFormData<Value>(formRef: FormRef, select: Selector<URLSearchParams, Value>, options?: UseFormDataOptions & {
    acceptFiles?: false;
}): Value | undefined;
export declare function useFormData<Value>(formRef: FormRef, select: Selector<FormData, Value> | Selector<URLSearchParams, Value>, options?: UseFormDataOptions & {
    acceptFiles?: boolean;
    fallback?: Value;
}): Value | undefined;
/**
 * useLayoutEffect is client-only.
 * This basically makes it a no-op on server
 */
export declare const useSafeLayoutEffect: typeof useEffect;
/**
 * Keep a mutable ref in sync with the latest value.
 * Useful to avoid stale closures in event handlers or async callbacks.
 */
export declare function useLatest<Value>(value: Value): import("react").MutableRefObject<Value>;
/**
 * A component that renders hidden base control(s) based on the shape of defaultValue.
 * Used with useControl to sync complex values with form data.
 *
 * **Example:**
 * ```tsx
 * const control = useControl<{ street: string; city: string }>({
 *   defaultValue: { street: '123 Main St', city: 'Anytown' },
 *   parse(payload) {
 * 	   if (
 *       typeof payload === 'object' &&
 *       payload !== null &&
 *       'street' in payload &&
 *       'city' in payload &&
 *       typeof payload.street === 'string' &&
 *       typeof payload.city === 'string'
 *     ) {
 *       return payload;
 *     }
 *
 *     throw new Error('Unexpected payload shape');
 *   },
 * });
 *
 * <BaseControl
 *   type="fieldset"
 *   name="address"
 *   ref={control.register}
 *   defaultValue={control.defaultValue}
 * />
 * ```
 */
export declare const BaseControl: import("react").ForwardRefExoticComponent<BaseControlProps & import("react").RefAttributes<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLFieldSetElement>>;
//# sourceMappingURL=hooks.d.ts.map