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

Conform view adapter for react

import { type FormRef } from './util';
export type Control = {
    /**
     * Current value of the base input. Undefined if the registered input
     * is a multi-select, file input, or checkbox group.
     */
    value: string | undefined;
    /**
     * Selected options of the base input. Defined only when the registered input
     * is a multi-select or checkbox group.
     */
    checked: boolean | undefined;
    /**
     * Checked state of the base input. Defined only when the registered input
     * is a single checkbox or radio input.
     */
    options: string[] | undefined;
    /**
     * Selected files of the base input. Defined only when the registered input
     * is a file input.
     */
    files: File[] | undefined;
    /**
     * Registers the base input element(s). Accepts a single input or an array for groups.
     */
    register: (element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLCollectionOf<HTMLInputElement> | NodeListOf<HTMLInputElement> | null | undefined) => void;
    /**
     * Programmatically updates the input value and emits
     * both [change](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) and
     * [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event) events.
     */
    change(value: string | string[] | boolean | File | File[] | FileList | null): void;
    /**
     * Emits [blur](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) and
     * [focusout](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event) events.
     * Does not actually move focus.
     */
    focus(): void;
    /**
     * Emits [focus](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event) and
     * [focusin](https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event) events.
     * This does not move the actual keyboard focus to the input. Use `element.focus()` instead
     * if you want to move focus to the input.
     */
    blur(): 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 input
 * and syncing it with a custom input.
 *
 * @example
 * ```ts
 * const control = useControl(options);
 * ```
 */
export declare function useControl(options?: {
    /**
     * The initial value of the base input. It will be used to set the value
     * when the input is first registered.
     */
    defaultValue?: string | string[] | File | File[] | null | undefined;
    /**
     * Whether the base input should be checked by default. It will be applied
     * when the input is first registered.
     */
    defaultChecked?: boolean | undefined;
    /**
     * The value of a checkbox or radio input when checked. This sets the
     * value attribute of the base input.
     */
    value?: string;
    /**
     * A callback function that is triggered when the base input is focused.
     * Use this to delegate focus to a custom input.
     */
    onFocus?: () => void;
}): Control;
type Selector<FormValue, Result> = (formData: FormValue | null, lastResult: Result | undefined) => Result;
type UseFormDataOptions = {
    /**
     * Set to `true` to preserve file inputs and receive a `FormData` object in the selector.
     * If omitted or `false`, the selector receives a `URLSearchParams` object, where all values are coerced to strings.
     */
    acceptFiles?: boolean;
};
/**
 * 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.
 *
 * @see https://conform.guide/api/react/future/useFormData
 * @example
 * ```ts
 * const value = useFormData(formRef, formData => formData?.get('fieldName').toString() ?? '');
 * ```
 */
export declare function useFormData<Value = any>(formRef: FormRef, select: Selector<FormData, Value>, options: UseFormDataOptions & {
    acceptFiles: true;
}): Value;
export declare function useFormData<Value = any>(formRef: FormRef, select: Selector<URLSearchParams, Value>, options?: UseFormDataOptions & {
    acceptFiles?: boolean;
}): Value;
export {};
//# sourceMappingURL=hooks.d.ts.map