next-form-action/dist/index.d.ts

A TypeScript library for handling form actions in Next.js applications

import React from 'react';

type ActionState = {
    payload?: FormData;
    success?: boolean;
    message?: string;
    formErrors?: Record<string, string[]>;
    extra?: Record<string, unknown>;
    redirect?: string;
    refresh?: boolean;
};
type Action = (state: ActionState, formData: FormData) => Promise<ActionState>;
type ActionParams = Omit<ActionState, 'message' | 'success'>;

declare class ActionResponse extends Error {
    readonly payload?: FormData;
    readonly success?: ActionState['success'];
    readonly formErrors?: ActionState['formErrors'];
    readonly extra?: ActionState['extra'];
    readonly redirect?: ActionState['redirect'];
    readonly refresh?: ActionState['refresh'];
    constructor(message: ActionState['message'], success: ActionState['success'], params?: ActionParams);
    toResponse(formData?: FormData): ActionState;
}
declare class ActionError extends ActionResponse {
    constructor(message: ActionState['message'], params?: ActionParams);
}
declare class ActionSuccess extends ActionResponse {
    constructor(message: ActionState['message'], params?: ActionParams);
}

declare const createActionState: (payload?: FormData, params?: ActionParams) => ActionState;
declare function error(message: ActionState['message'], params?: ActionParams): never;
declare function success(message: ActionState['message'], params?: ActionParams): never;
declare const createAction: (context: string, handler: (state: ActionState, formData: FormData) => Promise<ActionState>) => ((state: ActionState, formData: FormData) => Promise<ActionState>);

declare const useAction: (action: Action, actionState?: ActionState) => {
    Form: React.FC<React.HTMLAttributes<HTMLFormElement> & {
        children?: React.ReactNode | undefined;
    }>;
    FormError: React.FC<React.HTMLAttributes<HTMLDivElement>>;
    state: ActionState;
    isPending: boolean;
    formRef: React.RefObject<HTMLFormElement | null>;
    onFormSuccess: (callback: (state: ActionState) => void | Promise<void>) => void;
    onFormError: (callback: (state: ActionState) => void | Promise<void>) => void;
    onFormSubmit: (callback: (formData: FormData) => void | Promise<void>) => void;
};

export { ActionError, ActionResponse, ActionSuccess, createAction, createActionState, error, success, useAction };
export type { Action, ActionParams, ActionState };