⚓ @reactit/hooks

Welcome to @reactit/hooks, a great resource for useful React hooks. This package aims to become an exhaustive resource of pure hooks and only hooks, you will find no react components here.

Hooks

Async

| Name | Description | |-----------------------|------------------------------------------------------------| | useAsync | Handle async functions inside react rendering cycles | | useAsyncEffect | Same as useEffect but for async functions | | useExclusivePromise | Wraps an async function preventing concurrent calls | | usePromise | Convert an async function to a sync one and logs the error | | useQuery | Similar to useAsync but automatically run on mount | | useSharedAsync | Same as useAsync but calls to async function are shared | | useSharedPromise | Wraps an async function joining concurrent calls |

Browser

| Name | Description | |----------------|------------------------------------------------| | useIsMobile | Simple detect of mobile devices by userAgent |

Dom

| Name | Description | |----------------|------------------------------------| | useEvent | An effect to subscribe to an event | | useGlobalTag | Handles global tag life cycle |

Effects

| Name | Description | |----------------------|----------------------------------------------| | useScheduledEffect | An effect that executes at a specific Date |

todo : move to Time

Files

| Name | Description | |----------------------|---------------------------------------------------------------------------------| | useDownload | Handles download of an url using the browser builtin download functionalities | | useFileSelect | Prompts the user to select files through the builtin file selection modal | | useFileSelectState | Same as useFileSelect but is a state |

Generic

| Name | Description | |---------------------|------------------------------------------------------------| | useLatest | | | useLatestCallback | | | usePrevious | |

Navigation

| Name | Description | |--------------------------|------------------------------------------------------------| | useHref | | | useLocation | | | useSearchParam | |

State

| Name | Description | |--------------------------|------------------------------------------------------------| | useDefault | | | usePatch | | | useReset | |

Storage

| Name | Description | |--------------------------|------------------------------------------------------------| | useLocalStorageValue | | | useReactiveStorage | | | useSessionStorageValue | | | useStorage | | | useStorageValue | |

Time

| Name | Description | |--------------------------|------------------------------------------------------------| | useInterval | |

useAsync

An asynchronous wrapping function, that enables use of async functions within React functional components. This hook handles the entire lifecycle of a promise.

const {
    isLoading,
    isCompleted,
    isSucceed,
    isFailed,
    result,
    error,
    run,
    runAsync,
} = useAsync<Res, Args>(async (...args: Args) => { ... })

useAsyncEffect

Same as useEffect but for async functions, the only difference is that destructors are not supported.

useAsyncEffect(async () => {
    ...
}, [deps])

useExclusivePromise

Wraps an async function such that only one call at-a-time may be in execution, any attempt to call the promise while another execution is in progress will result in the second call throwing an exception.

const fn = useExclusivePromise(async (...args) => { ... })

usePromise

Wraps an async function and returns a plain function to be used inside sync functions and component callbacks, any exceptions will catch and console.debug() for development purposes.

const fn = usePromise(async (...args) => { ... })

useQuery

An asynchronous wrapping function, that enables use of async functions within React functional components. This hook handles the entire lifecycle of a promise.

const {
    isLoading,
    isCompleted,
    isSucceed,
    isFailed,
    result,
    error,
    reload,
    reloadAsync
} = useQuery<Res, Args>(async (...args: Args) => { ... })

useSharedAsync

Same as useAsync but useSharedPromise logic applies. Eg, if the async function is called multiple times while still running, the wrapped promise will be called only once.

const {
    isLoading,
    isCompleted,
    isSucceed,
    isFailed,
    result,
    error,
    run,
    runAsync,
} = useSharedAsync<Res, Args>(async (...args: Args) => { ... })

useSharedPromise

Joins multiple promise call into one, only one promise will be running at-a-time, calls are not queued but rather joined. When promises are called with arguments if arguments are the same as the original call the promise will be joined and wait for the completion, if arguments are different the promise will throw a concurrency exception.

const fn = useSharedPromise(async (...args) => { ... })

Proposals

• Some cookie hooks
• Some JWT hooks See
• change testing library form @testing-library/react-hooks to @testing-library/react (needed to use react 18)