remix-conform-rpc/dist/hooks/use-action.js

Supercharge your remix/react-router actions and loaders with typesafe param and query parsing using conform and zod

import { z, ZodSchema } from "zod";
import {} from "react";
import { isSuccessResponse } from "../utils/error.js";
import { useForm } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod";
import { serializeToFormData } from "../utils/serialize-to-form-data.js";
import { useFetcher } from "react-router";
function useAction(options) {
    const fetcher = useFetcher();
    function handleFetcherData() {
        if (!fetcher.data) {
            return;
        }
        if (isSuccessResponse(fetcher.data)) {
            options.onSuccess?.(fetcher.data);
        }
        else {
            options.onError?.(fetcher.data);
        }
    }
    const submit = (data) => {
        fetcher.submit(serializeToFormData(data), {
            method: options.method,
            action: options.path
        }).then(handleFetcherData);
    };
    return { submit, fetcher };
}
function useActionForm(options) {
    const [form, fields] = useForm({
        onValidate({ formData }) {
            return parseWithZod(formData, {
                schema: options.schema
            });
        },
        onSubmit(event, { submission }) {
            if (submission?.status !== "success") {
                return;
            }
            options.onFormSubmit?.(event, submission.value);
        },
        defaultValue: options.defaultValue
    });
    const { fetcher, submit } = useAction(options);
    return { form, fields, fetcher, submit };
}
export { useAction, useActionForm };
//# sourceMappingURL=use-action.js.map