https://github.com/shahradelahi/react-hook-action
⚡️ Lightweight & type-safe React hook for managing async actions.
https://github.com/shahradelahi/react-hook-action
async-actions error-handling hooks loading-state react state-management type-safe typescript zustand
Last synced: 4 months ago
JSON representation
⚡️ Lightweight & type-safe React hook for managing async actions.
- Host: GitHub
- URL: https://github.com/shahradelahi/react-hook-action
- Owner: shahradelahi
- License: mit
- Created: 2025-05-24T04:05:15.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-17T23:45:04.000Z (4 months ago)
- Last Synced: 2026-03-25T18:11:02.787Z (4 months ago)
- Topics: async-actions, error-handling, hooks, loading-state, react, state-management, type-safe, typescript, zustand
- Language: TypeScript
- Homepage: https://npmjs.com/react-hook-action
- Size: 128 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
react-hook-action
_react-hook-action_ is a lightweight React hook for managing asynchronous actions and their loading states, safely resolving promises and globally persisting states using Zustand.
---
- [Installation](#-installation)
- [Usage](#-usage)
- [Documentation](#-documentation)
- [Contributing](#-contributing)
- [License](#license)
## 📦 Installation
```bash
npm install react-hook-action
```
Install using your favorite package manager
**pnpm**
```bash
pnpm install react-hook-action
```
**yarn**
```bash
yarn add react-hook-action
```
## 📖 Usage
### Basic Usage
Wrap any asynchronous function to automatically manage `isLoading`, `result`, and `error` states.
```tsx
import { useAction } from 'react-hook-action';
export default function Page() {
const { result, error, isLoading, dispatch, reset } = useAction(
'fetchUser',
async (id: number) => {
const response = await fetch(`https://api.example.com/users/${id}`);
if (!response.ok) throw new Error('Failed to fetch user');
return response.json();
}
);
if (isLoading) {
return
Loading...;
}
if (error) {
return
Error: {error.message};
}
return (
{result && User: {result.name}}
dispatch(1)}>Fetch User
Reset
);
}
```
### Initial Result
You can provide an initial result to bypass loading states when data is already available.
```ts
const { result, dispatch } = useAction('fetchSettings', fetchSettingsFn, {
initialResult: { theme: 'dark', notifications: true },
});
```
### Ignoring Errors
If you want to silently fail and ignore any errors thrown by the action, use `ignoreErrors`. This will prevent the `error` state from being updated.
```ts
const { dispatch } = useAction('analyticsPing', sendAnalytics, {
ignoreErrors: true,
});
```
### Error Callbacks
Easily handle side-effects cleanly with the `onError` callback when an action fails.
```ts
const { dispatch } = useAction('saveData', saveDataFn, {
onError: (error) => {
toast.error(`Save failed: ${error.message}`);
},
});
```
## 📚 Documentation
For all configuration options, please see [the API docs](https://www.jsdocs.io/package/react-hook-action).
## 🤝 Contributing
Want to contribute? Awesome! To show your support is to star the project, or to raise issues on [GitHub](https://github.com/shahradelahi/react-hook-action).
Thanks again for your support, it is much appreciated! 🙏
## License
[MIT](/LICENSE) © [Shahrad Elahi](https://github.com/shahradelahi) and [contributors](https://github.com/shahradelahi/react-hook-action/graphs/contributors).