Type-safe form submissions using React server actions.
// my-form.tsx
'use client';
import { useFormAction } from 'form-actions/hooks';
import { myAction } from './actions';
export default function myForm() {
const { formAction, pending, bind, reset } = useFormAction({
initial: {
email: '',
password: ''
},
action: myAction,
then(data) {
if (data.errors) console.log(data.errors);
reset();
}
});
return <form action={formAction}>
<input placeholder="Email" required {...bind('email')}>
<input placeholder="Password" required {...bind('password')}>
<button disabled={pending}>Sign in</button>
</form>;
}// actions.ts
'use server';
export async function myAction({ email, password }: {
email: string;
password: string;
}) {
const user = getUserFromEmail(email);
if (!user) return {
errors: {
email: 'Email is incorrect'
}
};
if (!compare(password, user.hash)) return {
errors: {
password: 'Password is incorrect'
}
};
return { user };
}// actions.ts
'use server';
import { z } from 'zod';
const schema = z.object({
email: z.string(),
password: z.string()
});
export async function myAction(data: { email: string; password: string; }) {
const { error } = schema.safeParse(data);
if (error) return {
errors: {
email: true,
password: true
}
};
const user = getUserFromEmail(email);
if (!user) return {
errors: {
email: 'Email is incorrect'
}
};
if (!compare(password, user.hash)) return {
errors: {
password: 'Password is incorrect'
}
};
return { user };
}Using createEndpointFromAction you are able to create a wrapper around an action that takes in a Request object and returns a Response object with a JSON payload containing the return data from the action.
This could, for example, be used with Next.js' route handler files to create a publicly accessible endpoint.
// route.ts
import { createEndpointFromAction } from 'form-actions';
import { myAction } from './actions';
export const POST = createEndpointFromAction(myAction);