React Hooks

Collection of some react hooks

Usage

Installation

yarn add @react-cmpt/hooks

Hooks

• useAsyncClick
• useDebounce
• useDebouncedCallback
• useDebouncedClick
• useDeepCompareCache
• useDeepEffect
• useEllipsis
• useInterval
• useLoadImg
• useMountedState
• useSupportSafeArea
• useThrottle
• useThrottleFn
• useUnmount
• useUpdate
• useUpdateEffect

useAsyncClick

Click event with loading

option	type	default	explain
asyncFunc	function		async function
initState	Object	{ loading: false }	initial loading

return	type	default	explain
callback	function
loading	boolean
error	Error		catch error

import{useAsyncClick}from"@react-cmpt/hooks";constasyncFn=async()=>{// do something};constDemo=({ asyncFn })=>{const{ callback, loading }=useAsyncClick(asyncFn);return<Buttonloading={loading}click={callback}/>;};

useDebounce

option	type	default	explain
value	any
delay	number
options	Object

options:

option	type	default	explain
maxWait	number		Describes the maximum time func is allowed to be delayed before it's invoked
leading	boolean		This param will execute the function once immediately when called. Subsequent calls will be debounced until the timeout expires.
equalityFn	function		Comparator function which shows if timeout should be started

more options

import{useDebounce}from"@react-cmpt/hooks";constDemo=()=>{const[text,setText]=useState("hello");const[value]=useDebounce(text,1000);return(<div><inputdefaultValue={"hello"}onChange={(e)=>{setText(e.target.value);}}/><p>Actual value: {text}</p><p>Debounce value: {value}</p></div>);};

useDebouncedCallback

option	type	default	explain
callback	function
delay	number
options	Object

import{useDebouncedCallback}from"@react-cmpt/hooks";constDemo=()=>{const[value,setValue]=useState();// Debounce callbackconstdebouncedCallback=useDebouncedCallback(// function(value)=>{setValue(value);},// delay in ms1000);return(<div><inputonChange={(e)=>debouncedCallback(e.target.value)}/><p>Debounced value: {value}</p></div>);};

useDebouncedClick

Click event with loading and debounce

option	type	default	explain
asyncFunc	function		async function
delay	number	0	useDebouncedCallbackArgs["delay"]
options	Object		useDebouncedCallbackArgs["options"]

return	type	default	explain
callback	function
loading	boolean
cancelDebouncedCallback	function		useDebouncedCallbackReturns["cancelDebouncedCallback"]
callPending	function		useDebouncedCallbackReturns["callPending"]
error	Error		catch error

import{useDebouncedClick}from"@react-cmpt/hooks";constasyncFn=async()=>{// do something};constDemo=({ asyncFn })=>{const{ callback, loading }=useDebounceClick(asyncFn);return<Buttonloading={loading}click={callback}/>;};

useDeepCompareCache

option	type	default	explain
value	any

import{useDeepCompareCache}from"@react-cmpt/hooks";constobj1={a: 1,b: {b1: 2}};constobj2={a: 1,b: {b1: 2}};constDemo=()=>{constobj=useDeepCompareCache(obj1);console.log(obj1===obj2);// falseconsole.log(obj===obj1);// trueconsole.log(obj===obj2);// true// ...};

import{useDeepCompareCache}from"@react-cmpt/hooks";constDemo=()=>{// Deep comparison React.useEffectuseEffect(()=>{// ...},useDeepCompareCache([A,B]));// Deep comparison React.useCallbackconstcallback=useCallback(()=>{// ...},useDeepCompareCache([A,B]));// ...};

useDeepEffect

Deep comparison React.useEffect

option	type	default	explain
effect	function		Imperative function that can return a cleanup function
deps	Array		If present, effect will only activate if the values in the list change.

import{useDeepEffect}from"@react-cmpt/hooks";constDemo=({value: Object})=>{useDeepEffect(()=>{// do something},[value]);// ...};

useEllipsis

Hidden overflow content and get overflow status

option	type	default	explain
content	ReactNode	-	Overflow content. The expectation is String
options.lineClamp	number | string	-	The -webkit-line-clamp CSS property
options.debouncedWait	number	500	The number of milliseconds to delay. useDebouncedCallback
options.wrapperClassName	string	-	Wrapper element className
options.wrapperStyle	Object	-	Wrapper element style
options.wrapperProps	Object	-	Wrapper element other props
options.defaultOverflow	boolean	-	Default value of overflow (returns)

return	type	default	explain
node	JSX.Elment		Render element
overflow	boolean	false	Whether overflow content
reObserveElement	function		Manual re-observe wrapper element
recalculateEllipsis	function		Recalculate overflow content status

import{useEllipsis}from"@react-cmpt/hooks";constDemo=({ text })=>{const{ node, overflow }=useEllipsis(text,{lineClamp: 2});returnoverflow ? <Tooltipcontent={text}>{node}</Tooltip> : node;};

Browser compatibility

-webkit-line-clampResizeObserver API

useInterval

Handle the setInterval timer function.

option	type	default	explain
fn	function	-	Handle function. (setInterval callback)
delay	number	-	setInterval ms.
options.autorun	boolean	true	Runs automatically when mounted

return	type	default	explain
state	idle, running	idle	Operating status.
cancel	function		The clear timer function.
run	function		Manual restart interval function.

import{useInterval}from"@react-cmpt/hooks";constDemo=()=>{const{ state, cancel, run }=useInterval(()=>{console.log("hi");},1000);// ...};

useMountedState

Check component mount state

option	type	default	explain
-	-	-	-

return	type	default	explain
callback	function		Get mount status

import{useMountedState}from"@react-cmpt/hooks";constDemo=()=>{constgetMounted=useMountedState();useEffect(()=>{setTimeout(()=>{if(getMounted()){// do...}},1000);},[]);// ...};

useSupportSafeArea

• check if safe-area-inset-[top] env is supported
• https://webkit.org/blog/7929/designing-websites-for-iphone-x/

options	type	default	explain
defaultState	boolean	-	default return bool
position	'top' | 'left' | 'right' | 'bottom'	top	safe-area-inset-[postion]

import{useLoadImg}from"@react-cmpt/hooks";constDemo=()=>{constsupportSafeArea=useSupportSafeArea({postion: "bottom"});return(<divstyle={{paddingBottom: supportSafeArea ? `env(safe-area-inset-bottom)` : "16px",}}>
footer
</div>);};

constant or env

:root {
@supports (top:constant(safe-area-inset-top)) {
--safe-area-inset-top:constant(safe-area-inset-top);
--safe-area-inset-right:constant(safe-area-inset-right);
--safe-area-inset-bottom:constant(safe-area-inset-bottom);
--safe-area-inset-left:constant(safe-area-inset-left);
}
@supports (top:env(safe-area-inset-top)) {
--safe-area-inset-top:env(safe-area-inset-top);
--safe-area-inset-right:env(safe-area-inset-right);
--safe-area-inset-bottom:env(safe-area-inset-bottom);
--safe-area-inset-left:env(safe-area-inset-left);
}
}
.demo {
padding-bottom:16px;
&[data-supportSafeArea="true"] {
padding-bottom:var(--safe-area-inset-bottom);
}
}

useLoadImg

Get image loading status

option	type	default	explain
src	string		<img /> src
reqLoading	boolean		request loading
className	string
style	Object
imgProps	Object		<img /> props
lazy	number	0	Delay of done state

return	type	default	explain
imgNode	JSX.Element		<img />
state	loading, done, error, idle	idle	image state
loading	boolean
isError	boolean		image errored

import{useLoadImg}from"@react-cmpt/hooks";constDemo=()=>{const{ imgNode, loading }=useLoadImg({src: "[PATH]/demo.jpg",style: {width: "100%"},});return<divdata-loading={loading}>{imgNode}</div>;};

useThrottle

throttled value

option		type	default	explain
value		any	-	The value to throttle.
wait		number	0	The number of milliseconds to throttle invocations to.
options	leading	boolean	-	Specify invoking on the leading edge of the timeout.
	customizer	function	-	The function to customize comparisons.

return	type	explain
value	any	Returns the new throttled value.
cancel	function	The clear timer function.
callPending	function	The callback manually function.

import{useThrottle}from"@react-cmpt/use-throttle";constDemo=({ value })=>{const[tValue,{ cancel, callPending }]=useThrottle(value,200);// ...};

useThrottleFn

throttled function

<

option		type	default	explain
fn		function	-	The function to throttle.
wait		number	0	The number of milliseconds to throttle invocations to.
options	leading	boolean	-	Specify invoking on the leading edge of the timeout.

return	type	explain
callback	function	The new throttled function.
cancel	function	The clear timer function.
callPending	function	The callback manually function.

import{useThrottleFn}from"@react-cmpt/use-throttle";constDemo=()=>{const{ callback, cancel, callPending }=useThrottleFn(()=>{console.log("click");},200);return<buttononClick={callback}>++</button>;};

useUnmount

Unmount callback

option	type	default	explain
fn	function

import{useUnmount}from"@react-cmpt/hooks";constDemo=()=>{useUnmount(()=>{console.log("Unmount");});// ...};

useUpdate

Re-render components

return	type	default	explain
rerender	function		rerender callback

import{useUpdate}from"@react-cmpt/hooks";constDemo=()=>{constrerender=useUpdate();return(<><div>Date: {Date.now()}</div><buttononClick={rerender}>Update</button></>);};

useUpdateEffect

React.useEffect cancel the first mount trigger

option	type	default	explain
effect	function		Imperative function that can return a cleanup function
deps	Array		If present, effect will only activate if the values in the list change.

import{useUpdateEffect,useDeepCompareCache}from"@react-cmpt/hooks";constDemo=()=>{useUpdateEffect(()=>{console.log(value);},[value]);// Deep comparison useUpdateEffectuseUpdateEffect(()=>{console.log(value);},useDeepCompareCache([value]));// ...};

Dependencies

• fast-deep-equal
• use-debounce
• @react-cmpt/use-throttle

Dev

# build package
yarn build
# tests
yarn test# lint
yarn lint

License

MIT