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.
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
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
.
Name | Type | Default | Description |
---|---|---|---|
request |
{(...args:any[]) => Promise} |
- |
A function that returns a promise. |
Name | Type | Default | Description |
---|---|---|---|
value |
{Response<T>} |
- |
Boolean value. |
action |
{{wrapRequset}} |
- |
A function that returns a promise. |
For more information view demo.
Get the remaining height of the container and add a ResizeObserver via useRestHeight
.
Name | Type | Default | Description |
---|---|---|---|
container |
{ElementConfigType} |
- |
DOM container. |
children |
{Array<ElementConfigType>} |
- |
Container element. |
offsets |
{Array<string>} |
- |
Array of height offsets. |
Name | Type | Default | Description |
---|---|---|---|
value |
{number} |
- |
Remaining height. |
action |
{{updateRestHeight}} |
- |
A function that updates remaining height. |
For more information view demo.
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.
Name | Type | Default | Description |
---|---|---|---|
- |
{-} |
- |
- |
Name | Type | Default | Description |
---|---|---|---|
value |
{Bus} |
- |
Bus instance. |
action |
- |
- |
- |
For more information view demo.
A short handle that alternates between two states.
Name | Type | Default | Description |
---|---|---|---|
left |
{any} |
- |
Left value. |
right |
{any} |
- |
Right value. |
Name | Type | Default | Description |
---|---|---|---|
value |
{any} |
- |
Left and right value. |
action |
{{setLeft,setRight,toggle}} |
- |
Function of changing value. |
For more information view demo.
Alternate true
and false
value based on useToggle.
Name | Type | Default | Description |
---|---|---|---|
initialValue |
{boolean} |
- |
Boolean value. |
Name | Type | Default | Description |
---|---|---|---|
value |
{boolean} |
- |
Boolean value. |
action |
{{toggle}} |
- |
Function of changing boolean value. |
For more information view demo.
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.
Name | Type | Default | Description |
---|---|---|---|
callback |
{() => React.ReactNode} |
- |
A function that returns a React.ReactNode. |
container |
{HTMLElement} |
- |
DOM container. |
Name | Type | Default | Description |
---|---|---|---|
value |
- |
- |
- |
action |
{{render}} |
- |
Function of rendering dom. |
For more information view demo.
Create an timer
that can persist for the full lifetime of the component.
Name | Type | Default | Description |
---|---|---|---|
callback |
{() => void} |
- |
A function that is executed when the time is up. |
delay |
{number} |
0 |
Delay time. |
Name | Type | Default | Description |
---|---|---|---|
value |
{NodeJS.Timeout} |
- |
Timer. |
action |
{{on,off}} |
- |
Enable timer. |
For more information view demo.
Providing information about the size of an element and its position relative to the viewport and updating dom when size or position changes.
Name | Type | Default | Description |
---|---|---|---|
element |
{RectElement} |
- |
Element. |
options |
{{observer: boolean}} |
0 |
Whether to enable monitoring. |
deps |
{Array<any>} |
0 |
Rerender dependency list. |
Name | Type | Default | Description |
---|---|---|---|
value |
{Rect} |
- |
Size and Position information. |
action |
{{updateRect}} |
- |
Function of updating size and position information. |
For more information view demo.