https://github.com/devnax/react-tsync
https://github.com/devnax/react-tsync
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devnax/react-tsync
- Owner: devnax
- Created: 2025-03-11T09:14:41.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-19T03:10:43.000Z (12 months ago)
- Last Synced: 2025-06-19T04:23:41.724Z (12 months ago)
- Language: TypeScript
- Size: 34.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
Here's the updated documentation with the correct package name:
# `react-tsync` - React Hook and HOC for Handling Asynchronous Operations
## Overview
`react-tsync` provides two utility functions for handling asynchronous operations in React: `useAsync` and `withAsync`. These hooks simplify the management of asynchronous data fetching, error handling, and reloading logic within React components.
### Features
- **`useAsync`**: A hook that handles asynchronous operations, loading states, and error handling within a component.
- **`withAsync`**: A higher-order component (HOC) that wraps a component to handle asynchronous operations with built-in loading and error fallback UI.
## Installation
To install the package, use npm or yarn:
```bash
npm install react-tsync
# or
yarn add react-tsync
```
## API Documentation
### `useAsync`
```ts
const { data, isLoading, error, reload } = useAsync(promise: Promise, dependencies: any[] = []): UseAsyncResult
```
#### Parameters
- **`promise`** (`Promise`): A promise that represents an asynchronous operation. The hook will execute this promise and manage the loading and error states.
- **`dependencies`** (`any[]`, optional): An array of dependencies for the `useEffect` hook. It determines when the async operation should be re-triggered.
#### Returns
The `useAsync` hook returns an object with the following properties:
- **`data`** (`T | null`): The result of the asynchronous operation. If the operation hasn't completed yet, this will be `null`.
- **`isLoading`** (`boolean`): A flag indicating whether the asynchronous operation is in progress.
- **`error`** (`Error | null`): An error object if an error occurred during the operation. If no error occurred, this will be `null`.
- **`reload`** (`() => void`): A function to trigger a reload of the asynchronous operation. It toggles the reloading state, re-running the promise.
#### Example Usage
```tsx
const MyComponent = () => {
const { data, isLoading, error, reload } = useAsync(fetch(`https://jsonplaceholder.typicode.com/posts/${id}`), []);
if (isLoading) return
Loading...;
if (error) return Error: {error.message};
return (
{data}
Reload
);
};
```
### `withAsync`
```ts
const withAsync = (Component: ComponentPromise, fallback?: React.ReactNode, onError?: onError) => {
return function WrappedComponent
(props: P): React.ReactNode
}
```
#### Parameters
- **`Component`** (`ComponentPromise`): A function that returns a React component. This component will be wrapped by the HOC.
- **`fallback`** (`React.ReactNode`, optional): A React node to be shown while the data is loading.
- **`onError`** (`onError`, optional): A function that takes an error message and returns a React node. This will be displayed if an error occurs during the asynchronous operation.
#### Returns
- A React component that wraps the provided `Component` and handles asynchronous operations. This component will display the fallback UI while loading and handle errors using the provided `onError` function.
#### Example Usage
```tsx
const MyComponent = (props: { id: string }) => {
return
Data for {props.id};
};
const WrappedComponent = withAsync(MyComponent,
Loading..., (error: string) => Error: {error});
const App = () => {
return ;
};
```
## Example Usage
### Example 1: Using `useAsync` in a Component
```tsx
const FetchDataComponent = () => {
const { data, isLoading, error, reload } = useAsync(fetch(`https://jsonplaceholder.typicode.com/posts/${id}`), []);
if (isLoading) return
Loading...;
if (error) return Error: {error.message};
return (
{data.bod}
Reload
);
};
```
### Example 2: Using `withAsync` to Wrap a Component
```tsx
const MyComponent = async ({ id }: { id: string }) => {
const data = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
return
Data for {data.body};
};
const WrappedComponent = withAsync(MyComponent,
Loading..., (error: string) => Error: {error});
const App = () => {
return ;
};
```
## License
This package is open-source and available under the MIT License.
---
You can now publish this documentation along with your package `react-tsync` on npm!