https://github.com/jackh-sh/use-server-action
A type-safe React hook and utilities for working with Next.js server actions.
https://github.com/jackh-sh/use-server-action
nextjs react reactjs server-side server-side-rendering serveractions
Last synced: about 2 months ago
JSON representation
A type-safe React hook and utilities for working with Next.js server actions.
- Host: GitHub
- URL: https://github.com/jackh-sh/use-server-action
- Owner: jackh-sh
- License: mit
- Created: 2025-12-23T15:06:56.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-02-18T13:48:57.000Z (3 months ago)
- Last Synced: 2026-02-18T17:45:25.354Z (3 months ago)
- Topics: nextjs, react, reactjs, server-side, server-side-rendering, serveractions
- Language: TypeScript
- Homepage: https://use-server-action.jackh.sh
- Size: 612 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-server-action
A type-safe React hook and utilities for working with Next.js server actions.
## Installation
```bash
npm install use-server-action
```
## Quick Start
### 1. Create a server action
```ts
// app/actions.ts
"use server";
import { serverAction, success, error } from "use-server-action/server";
export const createUser = serverAction(async (name: string) => {
if (!name.trim()) {
throw new Error("Name is required");
}
const user = await db.user.create({ data: { name } });
return user;
});
// Or handle errors manually for more control:
export const deleteUserAction = async (id: string) => {
try {
await db.user.delete({ where: { id } });
return success({ deleted: true });
} catch (e) {
return error("Failed to delete user", "DELETE_FAILED");
}
};
```
### 2. Use in a client component
```tsx
"use client";
import { useServerAction } from "use-server-action";
import { createUser } from "./actions";
export function CreateUserForm() {
const {
execute,
data,
error,
isPending,
isSuccess,
isError,
reset,
} = useServerAction({
action: createUser,
onSuccess: (user) => {
console.log("User created:", user);
},
onError: (message, code) => {
console.error(`Error [${code}]:`, message);
},
});
return (
execute(formData.get("name") as string)}>
{isPending ? "Creating..." : "Create User"}
{isError &&
{error}
}
{isSuccess && Created: {data?.name}
}
);
}
```
## Documentation
You can view the documentation [here](https://use-server-action.jackh.sh)
## License
MIT