⚓ @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)