@vincecao/use-tools v1.3.5-beta.0

A group of reusable custom hooks for making react developer life easier.

use-tools

Installation

# latest
# npm
npm i @vincecao/use-tools
# yarn
yarn add @vincecao/use-tools

# beta
# npm
npm i @vincecao/use-tools@beta
# yarn
yarn add @vincecao/use-tools@beta

TThis package is automatically published in NPMJS and GITHUB npm registry.

To install package from Github npm registry, add below file in your repo before run npm i or yarn add.

# .npmrc
@vincecao:registry=https://npm.pkg.github.com

You can also install directly from current repo master

# npm
npm i vincecao/use-tools
npm i github:vincecao/use-tools

# yarn
yarn add vincecao/use-tools
yarn add github:vincecao/use-tools

Release Method

• When a Pull Request is merged to the master, Github Actions will create and publish a beta version.
• When a Release is created with a new tag version, Github Actions will create and publish a stable version.

Demo

Please check more samples at below

• Demo Site
• Code Sample

Hooks

usePromiseState

A hook that allows user to retrieve data from a promise. It takes a required promise function and optional callbacks and dependencyList as inputs, then return data, error, status, setData and refetch function.

const [remoteData, { error, status, refetch }, setRemoteData] = usePromiseState<T>(promise, {
  deps,
  onPending,
  onSuccess,
  onError,
  onFinal
})

_The promise needs to be wrapped with useCallback and options needs to be wrapped with useMemo if it is not undefined, Because each time they are updated, the promise function will be called inside a useEffect.

useTimeout

A simple implementation of useTimeout hook. The changes of promise will reset timeout delay. The disable option will pause entire hook, disableDelay will remove setTimeout behavior so function be called immediately.

useTimeout<T>(func, delay, disabled, disableDelay)

The func needs to be wrapped with useCallback.

useShuttle

A hook returns a new shuttled list for each unique given array. The changes of array will trigger re-generating a new shuttled list.

const shuttled = useShuttle<T>(array)

Running live example

yarn
yarn start

cd example
yarn
yarn start