Like-Hooks
React Hooks Library,Support React@16.8↑;
Usage
install
npm i like-hooks -S
or
yarn add like-hooks save
useDeepMemo
Can receive an object for depth comparison,like useMemo.
const opacity setOpacity =return;
useDeepCallback
like useDeepMemo,But this belongs to useDeepCallback
.
const times setTimes = const cb =
useDeepEffect
Depth contrast deps,trigger effects.
const times setTimes =
useWhyDidYouUpdate
Version of hook WhyDidYouUpdate
。
{const count setCount = ;const userId setUserId = ;// Our console output tells use that the style prop for <Counter> ...// ... changes on every render, even when we only change userId state by ...// ... clicking the "switch user" button. Oh of course! That's because the// ... counterStyle object is being re-created on every render.// Thanks to our hook we figured this out and realized we should probably ...// ... move this object outside of the component body.const counterStyle =fontSize: '3rem'color: 'red';return<div><div className="counter"><Counter count=count style=counterStyle /><button onClick= >Increment</button></div><div className="user"><img src=`http://i.pravatar.cc/80?img=` /><button onClick= >Switch User</button></div></div>;}
useStateWithCb
Support for setstate callbacks, just like class Component
const count setCounter = ;;// or Continuous trigger;
useStateChange
when state has changed the callback function will be triggered in useEffect。
const state setState =
useStateChangeLayout
Similar to the hook function above, however function will be triggered in useLayoutEffect。
const state setState =
useLockBodyScroll
In some cases, user scrolling is disable。
;
useContextProvide
:<StateDispatch>
useDebounce
useDebounce(debounceFn:()=>any,deps:any[],times:number)
const val setVal = ;const debouncedValue setDebouncedValue = ; ;
useDraggable
You can drag and drop an element。
const el = ;const x y pageX pageY = ;return<div><div ref=el className="DraggableBox" /><div>offset::x:x,y:ypageX:pageX,pageY:pageY</div></div>;
useEventListener
const coords setCoords = ;const inputRef = ;const handler =;;
useFavicon
Add or replace the favicon of the current page
useGetter
Listen to read variables and respond to callback functions.
const obj setObj = ;;
useImtArray
Achieving Immutable Array-like capabilities。
useImtArray(imtArr:any[]):Imt
Support push、clear、removeIndex、removeVal、pop....
const input = ;const imtArr = ;
useInput
Greatly simplified <Input value='' onChange={({currentTarget})=>{}}>
...
useInput(initialVal?:string):InputOption
InputOptionbind // bind InputInputOptionclear // clear current Input valueInputOptionrepalce // handler current Input string
const input = ;return<input className="input" ...inputbind />
useLifeCycles
Alternative Life Cycle, Component Didmount and Component WillUnmount
useLifeCycles(mountFn?:() => void,unMountFn?:() => void)
useMergeState
Merge the current state, add or replace new attributes。
const user mergeState =// user {firstName: 'Seven',lastName: 'Floyd'}
usePrevious
Gets a value before the change, and returns it for the first time, optionally(initEqual: true), because in some cases Effect calls ahead of time and returns undefine
.
usePrevious(preState:any,initEqual?:boolean)
const count setCount = ;const previousCouner = ; // 0 const changeCounter = { ;};
usePromise
ReactHook version of Proise。
const request = {return {;};};const state setState = ;const value loading error = ;return<p>result:loading ? <span>Loading...</span> : <span>error || value</span></p>
useRaf
Create tasks through requestAnimationFrame。
useRaf(fn:() => void, initRun:boolean):RafControl
const min setMin = ;const second setsecond = ;const run = { ;};const start stop = ;
useScript
Loading Script dynamically and preventing duplicate loading.
useScript(src:string):void
useSpeech
Ability to read text。
useSpeech(text:string,volume?:number):void
useTheme
Quickly replace a set of subject variables. Through `document.documentElement. style.setProperty()'.
;
useThrottle
Throttling function Hooks。
const throttledValue = ;
useThrottleVal
As above, But based on original value Hooks。
const throttledValue = ;
LICENSE
MIT