\n setInterval((t) => (!!t ? t + 1000 : 1000))}\n style={{ marginRight: 8 }}\n >\n interval + 1000\n \n {\n setInterval(1000);\n }}\n >\n reset interval\n \n {\n setInterval(undefined);\n }}\n >\n clear\n \n
\n);\n```\n### useCounter 管理计数器\n- 入参 \n - initialValue:number 初始化的数字 超出options则返回边界值\n - options\n - min?: number 选填 最小值\n - max?: number 选填 最大值 maxcount: {count}
\ninterval: {interval}
\n\n rgba:{rgba}\n
\n```\n### useRGB2Hex rgb->hex\n- 入参 r,g,b\n - r:number\n - g:number\n - b:number\n- @return value\n - value:string 返回结果\n```tsx\nconst hex = useRGB2Hex(0,0,0)\n```\n### useTrims 替换字符串所有的空格\n- 入参 str,rep,normalFirst\n - str:string 输入的字符串\n - rep?:string 空格替换成什么,默认为空\n - normalFirst?:boolean 是否先去掉头尾的空格 默认为true\n- @return result:string\n```tsx\nconst data = useTrims(' a b c d ','1',true)//a1b1c1d\nreturn \n {data}\n
\n```\n### useFocus input的focus事件\n- 入参 target,options\n - target:MutableRefObject\n useFocus:{`${focus}`}\n
\n```\n### usePictureInPicture 画中画API\n- 入参 video\n - video: HTMLVideoElement | MutableRefObject\n color:{color}\n
\n```\n### useRequestAny 请求多个链接,最快返回结果\n- 入参 url,options\n - url: string | string[] 请求链接,url或数组\n - options: RequestInit 选填,fetch的参数\n- @return [result, { loading; update}]\n - result:any 返回结果\n - loading:boolean 加载中\n - update: () => void 再次请求\n```tsx\nconst [data, {update}] = useRequestAny('https://devapi.qweather.com/v7/weather/now?location=119.8824799,29.95931271&key=ae9136fb06a04934bdd38d87b35ea563')\nconst [data2,{loading}] = useRequestAny(['https://devapi.qweather.com/v7/weather/now?location=119.8824799,29.95931271&key=ae9136fb06a04934bdd38d87b35ea563','https://restapi.amap.com/v3/ip?key=b5dc101510c3172849a4fd74a4db8508'])\nconsole.log(data,data2)\nreturn <>\n update
\n\n```\n### useKebabCase 驼峰命名=>中横线命名\n- 入参 str,line\n - str:string 必填 字符串\n - line:string 选填 默认为-\n- @return result:string\n```tsx\n// const data = useKebabCase('AbCdEFG')//ab-cd-e-f-g\nconst data = useKebabCase('AbCdEFG','*')//ab*cd*e*f*g\nconst pre = useCamelCase(data,'*')//abCdEFG\nreturn <>\n {data}
\n {pre}
\n\n```\n### useCamelCase 中横线命名=>驼峰命名\n- 同useKebabCase,方向不同\n\n### usePrint 打印部分模块\n- 参数 ele?\n - ele?: MutableRefObject\n print\n
\n ![\"\"/](\"https://avatars.githubusercontent.com/u/18043679\")
\n \n```\n### useAsyncEffect 支持await的useEffect\n- 参数同useEffect\n```tsx\nconst [data,setData]=useStateuseFixed:{fixed}
\n toFixed:{toFixed}
\n\n```\n\n### useLegacyState 来合并对象 state 的更新\n- 参数 初始化对象\n- @return [data,setData]\n - data 最新的对象\n - setData 更新,传入新的对象\n```tsx\nconst [data,setData] = useLegacyState({a:1,b:2})\nreturn setData({a:data.a+1,c:data.a})}>{JSON.stringify(data)}
\n```\n### useWillUnmount 销毁前执行回调\n- componentWillUnmount\n- 入参 callback\n - callback:function\n```tsx\nfunction Test(){\n const [data,setData] = useState(1)\n useWillUnmount(()=>console.log(data))\n return data:{data}
\n}\n\nfunction App() {\n const [show,setShow] = useState(true);\n return <>\n change
\n {show&&update{num}
\n```\n### useUpdateLayoutEffect useLayoutEffect-只执行update\n- 同 useDidUpdate\n### useJSONP 使用jsonp⚠\n- ️参数[url,options]\n - url:string 请求链接\n - options? 选填 配置\n - callback? 选填回调函数\n - reqName?:string 请求的cb名称,默认为callback\n - backName?:string 调用本地window的方法名称,默认随机生成 无需求建议不填\n- @return void\n```tsx\n useJSONP(\"https://www.taobao.com/help/getip.php\", {\n callback: getData,\n backName: \"ipCallback\",\n});\n```\n\n### useDeepClone 深拷贝\n- 入参 data\n - data?:T 选填,任意参数\n- @return\n - result 结果\n```tsx\nconst data = [1,{s:[]}]\ndata[2] = data\nconst result = useDeepClone(data)\nresult[1].s.push(1)\nconsole.log(data)\n```\n\n### useAnimation 使用部分animate动画效果\n- 参数 (name,options)\n - name: \"fadeIn\"| \"fadeOut\"| \"zoomIn\"| \"zoomOut\"| \"pulse\"|\"fadeInDownBig\"| \"bounce\" |\"flash\"|\"rubberBand\"|\"shakeX\"|\"shakeY\" animate名称,必填\n - options?: 配置,选填\n - duration?: number; 选填,持续时长,单位秒 默认为2s\n - count?: number | \"infinite\"; 选填,重复次数,默认1次,infinite表示无限\n - timing?: \"linear\" | \"ease\" | \"ease-in\" | \"ease-out\" | \"ease-in-out\"; 选填,播放速度模式,默认匀速(linear)\n - fillMode?: \"none\" | \"forwards\" | \"backwards\" | \"both\";选填,结果后的位置(填充模式),默认为forwards:保留最后一帧\n - delay?: number;选填,延迟加载时长 s或ms\n - alternate?: boolean;选填,是否轮流反向播放,默认false\n- @return [styles,togglePause]\n - styles:css属性\n - togglePause:()=>void 暂停/开始\n```tsx\nconst [styles,togglePause] = useAnimation('fadeIn',{\n alternate:true,\n count:'infinite'\n})\nreturn animation
\n```\n\n### useStayTimeFn 监听停留时间\n- 同页面跳转生效\n- 参数 callback\n - callback?: (time?: number) => void 选填,跳转/关闭时执行,不可包裹延迟任务\n- @return {stayTime,reset}\n - stayTime : () => number 获取停留时间\n - reset : () => void 重新开始计数\n```tsx\n const {stayTime,reset} = useStayTimeFn((time)=>{\n localStorage.a=time\n });\n function getTime(){\n console.log(stayTime())\n reset()\n }\n return time
;\n```\n### useFetch 调用fetch\n- 请求失败则使用上次数据\n- 参数 (url: string, options?: RequestInit)\n - url:请求链接\n - options:选填,fetch的参数\n- @return [data,{request;loading}]\n - data:结果,在没返回结果前是undefined\n - request: () => void;更新\n - loading: boolean;更新数据中\n```tsx\nconst [value,{\n loading,\n request\n}] = useFetch('xxx')\nreturn {!loading&&JSON.stringify(value)}
;\n```\n### useRequest\n- 参数 fn\n - fn:请求的方法\n- @return [data]\n - data:结果\n```tsx\n const [data] = useRequest(fn);\n\n```\n### useRem 辅助使用rem\n- 不是使用rem\n- 动态修改html的font-size\n- 监听onResize\n- 参数 options? 配置 选填;每baseWidth-->baseFontSize\n - baseWidth: number; 选填 默认为375\n - baseFontSize: number;选填 默认为16px\n - maxWidth: number;选填 默认无\n- @return fontSize:number\n - fontSize:number,返回font-size\n\n```tsx\n// const fontSize = useRem({maxWidth:800})\nconst fontSize = useRem()\n```\n### useCookie 设置/获取cookie\n- 参数:{key,options}\n - key:cookie的键\n - options 可选\n - defaultValue?: string | number; 默认值\n - expires?: Date | number;过期时间/有效时长(ms)\n - path?: string;可用的路径\n - domain?: string;可用的域\n - secure?: boolean;https 安全协议\n - ameSite?: \"strict\" | \"lax\" | \"none\";跨域请求\n- @return [data,update]\n - data:string 取出的值\n - update:(value:string)=>void 更新\n```tsx\n const [data,update] =useCookie('a',{\n // defaultValue:210,\n path:'/',\n // expires:new Date(2023,0,1),\n expires:1000*60,\n domain:'localhost',\n secure:true,\n sameSite:'strict'\n });\n```\n### useUUID 获取随机uuid\n- 支持自定义长度\n- 默认为 [8, 4, 4, 4, 12] // 如 `902e95e8-5101-0c54-374e-dfd89dc98523`\n- 参数:\n - len?:number | number[] 选填,纯数字或数字数组,用数组会用-隔开\n- @return [uuid, refresh]\n - uuid 结果\n - refresh 更新\n```tsx\nconst [uuid, refresh] = useUUID()\n// const [uuid, refresh] = useUUID(80)\n// const [uuid, refresh] = useUUID([1,2,3,4])\nreturn <>\n {uuid}
\n\n```\n### useParams 解析params\n- 解析params或location.search\n- 支持重复key\n- 参数 (params)\n - params:string 选填,默认为location.search\n- @return {}: RecordsetParams('a=1&a=2&a=1')}>update
\n\n```\n### useSetState `setState`\n- 参数 object\n- @return [state,setState]\n - state 最新的对象\n - setState 更新,类似Class的\n```tsx\nconst [state,setState] = useSetState({a:1,b:2})\nreturn <>\n setState({a:state.a+1})}>{JSON.stringify(state)}
\n setState({c:1})}>add c
\n setState(prev=>({\n a:prev.a-1\n }))}>update
\n\n```\n### useRandom 随机获取\n- 参数 [...args]\n - args:任意参数\n- @return [data,update]\n - data 取出的随机值\n - update 更新随机值\n\n### useAdd 大数相加\n- 不支持负数\n- 参数 [...nums]\n - 数字/字符串表示的数字\n- @return [data,add]\n - 计算结果\n - add:累加\n```tsx\nconst [data,add] = useAdd('99999999999999999999999999999','9999999999999999999999999999999999','9999999999999999999999999999999999')\nreturn add('99999999999999999999999999999')}>{data}
;\n```\n\n### useCountDown 标准时间倒计时\n- 以秒为单位的倒计时\n- 参数 [time,options:{interval,callback}]\n - time:number,倒计时(s)\n - options\n - interval?:number,可选,触发间隔,单位秒\n - callback?:function,可选,倒计时归0后触发\n - @return [remain,{stop,wait,start}]\n - remain 剩余时间,单位秒\n - stop 停止\n - wait 暂停\n - start 开始/继续\n\n```tsx\n const [remain,{\n stop,\n wait,\n start\n }] = useCountDown(10,{\n interval:2,\n callback:()=>{\n console.log('done')\n }\n })\n\n return <>\n {remain}
\n wait\n stop\n start\n \n```\n\n### useScroll\n- 监听元素的滚动位置\n - 支持ref,未绑定返回0\n - document\n- @return [left,top] \n - left:number,坐边距\n - top:number,上边距\n\n### useSize\n- 基于ResizeObserver\n- 初始化参数\n - ref/Element\n- @return\n - [width,height]\n```tsx\nconst ref = useRef()\nconst [width,height] = useSize(ref)//正常的ref\n\nconst refNull = useRef()\nconst [wNull] = useSize(refNull)//空ref 返回0\n\nconst [wApp] = useSize(document.getElementById('app'))// document\nconst [nullApp] = useSize(document.getElementById('app1'))// 不存在的DOM 返回0\n\nreturn <>\n {width}
\n {wNull}
\n {wApp}
\n {nullApp}
\n\n```\n\n### useFullScreen 全屏\n- 支持全屏的浏览器才有效果\n- 参数 element\n - element:ref,()=>dom 非必填,默认document\n- 返回 [isFullScreen, {enterFullscreen, exitFullscreen, toggleFullscreen,isEnabled}]\n - isFullScreen 现在是否是全屏\n - enterFullscreen 进入全屏\n - exitFullscreen 退出全屏\n - toggleFullscreen 切换全屏\n - isEnabled 是否支持全屏\n```tsx\nconst ref = useRef()\nconst [isFullScreen, {\n enterFullscreen, exitFullscreen, toggleFullscreen,isEnabled\n// }] = useFullScreen(ref)\n}] = useFullScreen(()=>document.querySelector('img'))\n\nreturn <>\n {`${isFullScreen}`}\n enterFullscreen
\n exitFullscreen
\n toggleFullscreen
\n\n```\n### useUpdate 强制刷新\n```tsx\nconst update= useUpdate()\nreturn <>\n update
\n\n```\n### useFavicon 更改网站的favicon\n- 参数\n - url:string 初始化favicon\n- @return\n - url:string 现在的favicon\n - update:(newUrl:string)=>void 更新\n```tsx\nconst [url,update] = useFavicon('xx')\n return <>\n update
\n \n```\n### useTitle 修改修改title\n```tsx\nuseTitle('shooks')\n```\n\n### useDebounceValue 值防抖\n- 数值改变后nms后响应\n- 初始化参数\n - 初始化的值\n - timeout:number,防抖数值 默认1000ms\n- @return\n - value:最新的值\n\n```tsx\n const [num,setNum] = useState(1)\n const value = useDebounceValue(num)\n\n function add(){\n setNum(num+1)\n }\n return <>\n {num}
\n {value}
\n \n```\n### useThrottleValue 值节流\n> useDebounceValue,获得节流效果\n### useDebounce 防抖\n- 初始化参数\n - 初始化的值\n - timeout:number,防抖数值 默认1000ms\n- @return\n - value:最新的值\n - fn:设置最新的结果\n - fn(value)\n```tsx\n const [num,setNum] = useDebounce(1)\n const [age,setAge] = useDebounce(1,10)\n function add(){\n setNum(num+1)\n setAge(age+1)\n }\n return <>\n {num}
\n {age}
\n \n```\n### useThrottle 节流\n> 用法同useDebounce,获得节流效果\n### useThrottleFn 处理函数节流\n- 参数 (fn: (...args: unknown[]) => void, wait?: number)\n - fn:函数\n - wait:延迟时间,选填 默认1000(ms)\n- @return () => void\n - 执行函数\n```tsx\nconst [value, setValue] = useState(0);\nconst run = useThrottleFn(\n () => {\n setValue(value + 1);\n },\n 500,\n);\n\nreturn (\n \n
\n);\n```\n### useLatest 返回最新值,处理闭包问题\n- 参数 value/fn\n- @return ref\n - ref.current\n```tsx\nconst [value,setValue] = useState(1)\nconst ref = useLatest(value)\nuseEffect(()=>{\n setInterval(()=>{\n // setValue(value+1)\n setValue(ref.current+1)\n },1000)\n},[])\nreturn count: {value}
\n \n{value}
\n```\n### useHover 监听鼠标是否在指定dom元素上\n- 参数 (dom,options)\n - dom:ref或者document\n - options 选填,回调事件\n - onHover? 鼠标进入dom时触发\n - onLeave? 鼠标离开dom时触发\n- @return hover\n - hover:boolean 现在鼠标是否在dom内\n```tsx\nconst ref = useRef(null);\nconst isHovering = useHover(ref,{\n onHover:()=>console.log('enter'),\n onLeave:()=>console.log('leave')\n});\n// const isHovering = useHover(document);\nreturn {isHovering ? 'hover' : 'leaveHover'}
;\n```\n### useLocalStorage\n- 参数\n - key:string 必填 \n - options 选填\n - defaultValue:初始值 选填\n - force:boolean;覆盖老数据,如果没有defaultValue,则设置local为'''\n```tsx\nconst [data,{set,reset}] = useLocalStorage('store',{\n defaultValue:{\n age:10,\n },\n force:true\n})\nconst [name,upName] = useLocalStorage('reset',{\n force:true\n})\n\nfunction add(){\n set({\n age:data.age+1\n })\n upName.set('reset')\n}\n\n\nreturn <>\n {data.age}
\n {name}
\n \n```\n### useSessionStorage\n> 同 `useLocalStorage`\n\n### useMap\n```\nimport { useMap } from 'shooks'\n\nconst [value, { set, remove, clear, reset, has, size }] = useMap([\n [\"a\", \"b\"],\n]);\n```\n### useSet\n```\nimport { useSet } from 'shooks'\n\nconst [value, { set, remove, clear, reset, has, size }] = useSet(1);\n```\n\n### useBoolean\n- defaultValue:false\n- toggle:切换\n- setTrue:设为true\n- setFalse:设为false\n```tsx\nconst [data, {toggle,setTrue,setFalse}] = useBoolean(true)\n```\n\n### useWan 转换数字,默认为万\n- 支持正负数\n- 支持小数\n- 不支持转换返回原数值\n- 参数 (num, step)\n - num: number | string 必填,需要转换的数字\n - step: number = 4,选填,小数点前移的数量,默认为4位,即/10000\n- @return [result,changed]\n - result:string 结果\n - changed:boolean 是否转换成功\n```tsx\n// const [num,upNum] = useState(-99999.9)//-9.9万\n// const [num,upNum] = useState(100000.12)//10.0万\nconst [num,upNum] = useState(10.1)//10.1元\n// const [result,hadChange] = useWan(num,2)\nconst [result,hadChange] = useWan(num)\nreturn {result}{hadChange?'万':'元'}
;\n```","readmeFilename":"Readme.md","keywords":["react","react-hooks"],"author":{"name":"jindw"}}