use-safe-action

usedSafeAction

It's just a repository to expose this implementation as a npm library. Thanks @AntonioErdeljac!

Creates a typed and self validated action to be used as hook in Nextjs Client Component.

How to use

First, create a Next Server Actions

'use server'

// import dependencies
import { type ActionState, createSafeAction } from "use-safe-action";
import { ContactFormInput } from "./schema";

type ReturnType = ActionState<ContactFormInput, string>

const handler = async (input: ContactFormInput): Promise<ReturnType> => {
    try {
        console.log(input)

        return {
            data: 'Success...'
        }

    } catch (error) {
        return {
            error: (error as Error).message
        }
    }
}

// export the action
export const sendContactEmail = createSafeAction(ContactFormInput, handler)

'use client'

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { ContactFormInput } from "~/server/api/use-case/email/schema";
import { sendContactEmail } from "~/server/api/use-case/email/send-contact-email";
import { useToast } from "../ui/use-toast";
import { useAction } from "use-safe-action";

const ContactForm = () => {
    const { toast } = useToast();
    const form = useForm<ContactFormInput>({
        resolver: zodResolver(ContactFormInput)
    })
    // use the action
    const { execute, isLoading } = useAction(sendContactEmail, {
        onSuccess(data) {
            form.reset();

            toast({
                title: 'Sucess!',
                description: data,
                variant: 'success'
            })
        },
        onError(error) {
            toast({
                title: 'Error!',
                description: error,
                variant: 'destructive'
            })
        },
    });

    return ...;
}

export default ContactForm;