---

Table of Contents

• Introducing Hooks
• Installation
• Hooks
  • useLoading
  • useRestHeight
  • useBus
  • useToggle
  • useBoolean
  • usePortal
  • useTimeout
  • useBoundingClientRect

Introducing Hooks

Hooks 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 npm which is bundled with node and should be installed as one of your project's dependencies:

npm install nicehook --save

or

for installation via yarn:

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 demo.

useRestHeight

Get the remaining height of the container and add a ResizeObserver 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 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 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 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 demo.

usePortal

Portals 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 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 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 demo.