nicehook

---

!Build Statusbuild-badgebuild !Code Coveragecoverage-badgecoverage !versionversion-badgepackage !downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense !PRs Welcomeprs-badgeprs
!Watch on GitHubgithub-watch-badgegithub-watch !Star on GitHubgithub-star-badgegithub-star

Table of Contents

• Introducing Hooks
• Installation
• Hooks

- useLoading - useRestHeight - useBus - useToggle - useBoolean - usePortal - useTimeout - useBoundingClientRect

Introducing Hooks

Hookshooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Building your own Hooks lets you extract component logic into reusable functions.

Installation

This module is distributed via npmnpm which is bundled with nodenode and should be installed as one of your project's dependencies:

npm install nicehook --save

or
for installation via yarnyarn:

yarn add nicehook

Hooks

useLoading

A promise represents a single asynchronous operation that hasn’t been completed yet, but is expected in the future. There are three states of promises, pending, fulfilled and rejected.
Get pending state and resulting value via useLoading.

Params

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |request|{(...args:any[]) => Promise}|-|A function that returns a promise.|

Result

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |value|{Response<T>}|-|Boolean value.| |action|{{wrapRequset}}|-|A function that returns a promise.|
For more information view demouse-loading-demo.

useRestHeight

Get the remaining height of the container and add a ResizeObserverresize-observer via useRestHeight.

Params

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |container|{ElementConfigType}|-|DOM container.| |children|{Array<ElementConfigType>}|-|Container element.| |offsets|{Array<string>}|-|Array of height offsets.|

Result

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |value|{number}|-|Remaining height.| |action|{{updateRestHeight}}|-|A function that updates remaining height.|
For more information view demouse-rest-height-demo.

useBus

Sometimes it is difficult to pass events between peer Components, we can create a bus via useBus to complete it easily and it's returned object will persist for the full lifetime of the component.

Params

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |-|{-}|-|-|

Result

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |value|{Bus}|-|Bus instance.| |action|-|-|-|
For more information view demouse-bus-demo.

useToggle

A short handle that alternates between two states.

Params

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |left|{any}|-|Left value.| |right|{any}|-|Right value.|

Result

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |value|{any}|-|Left and right value.| |action|{{setLeft,setRight,toggle}}|-|Function of changing value.|
For more information view demouse-toggle-demo.

useBoolean

Alternate true and false value based on useToggle.

Params

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |initialValue|{boolean}|-|Boolean value.|

Result

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |value|{boolean}|-|Boolean value.| |action|{{toggle}}|-|Function of changing boolean value.|
For more information view demouse-boolean-demo.

usePortal

Portalsportals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
usePortal will return a memoized version of the component that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized components that rely on reference equality to prevent unnecessary renders.

Params

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |callback|{() => React.ReactNode}|-|A function that returns a React.ReactNode.| |container|{HTMLElement}|-|DOM container.|

Result

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |value|-|-|-| |action|{{render}}|-|Function of rendering dom.|
For more information view demouse-portal-demo.

useTimeout

Create an timer that can persist for the full lifetime of the component.

Params

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |callback|{() => void}|-|A function that is executed when the time is up.| |delay|{number}|0|Delay time.|

Result

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |value|{NodeJS.Timeout}|-|Timer.| |action|{{on,off}}|-|Enable timer.|
For more information view demouse-timeout-demo.

useBoundingClientRect

Providing information about the size of an element and its position relative to the viewport and updating dom when size or position changes.

Params

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |element|{RectElement}|-|Element.| |options|{{observer: boolean}}|0|Whether to enable monitoring.| |deps|{Array<any>}|0|Rerender dependency list.|

Result

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |value|{Rect}|-|Size and Position information.| |action|{{updateRect}}|-|Function of updating size and position information.|
For more information view demouse-bounding-client-rect.