use-server-action
use-server-action
is a React hook that simplifies the usage of Next.js' Server Actions, providing an easy-to-use interface for handling loading states, data, errors, and execution.
Installation
npm install use-server-action
or
yarn add use-server-action
Usage
// actions.ts
"use server"
export async function createPost(title: string) {
// Your Server Action logic goes here.
const prisma = new PrismaClient()
const post = await prisma.post.create({ data: { title } })
return post
}
import { useServerAction } from "use-server-action"
import * as actions from "./actions"
export function MyComponent() {
const { data, error, execute: createPost, loading } = useServerAction(actions.createPost)
function handleButtonClick() {
// Trigger the execution of the Server Action.
createPost("The best post title!")
}
return (
<div>
<button onClick={handleButtonClick} disabled={loading}>
{loading ? "Loading..." : "Create Post"}
</button>
{data && <p>Data: {JSON.stringify(data)}</p>}
{error && <p>Error: {error.message}</p>}
</div>
)
}
API
useServerAction(action: () => Promise<any>)
The hook takes a Server Action function as its argument and returns an object with the following properties:
-
data
: The data returned by the Server Action. -
error
: Any error that occurred during the execution of the Server Action. -
execute
: A function to trigger the execution of the Server Action. -
loading
: A boolean indicating whether the Server Action is currently loading.
Contributing
If you'd like to contribute to this project, please follow our contribution guidelines.
License
This project is licensed under the MIT License.