React hooks acc

〇、引

我們通常使用ahooks作為reacthooks庫，它為我們的開發提供友善的同時，也引起了我們的思考，開源社群還有哪些還不錯的reactHooks庫呢？

本文是從github中找到的各類hooks的整理，希望為我們開發、學習提供幫助。

一、零散hook

name

github

keyword

reference

use-immer

https://github.com/immerjs/use-immer

替代usestate、性能優化

《不可變資料結構》

immer

useOnlineStatus

https://github.com/ChinaLiuRixing/react-hookedup/blob/master/src/hooks/useOnlineStatus.ts

是否斷網

navigator.online

usePrevious

https://github.com/ChinaLiuRixing/react-hookedup/blob/master/src/hooks/usePrevious.ts

儲存上次狀态

useFocus

https://github.com/ChinaLiuRixing/react-hookedup/blob/master/src/hooks/useFocus.ts

focus

useAsync

https://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useAsync.js

異步、async

https://beizhedenglong.github.io/react-hooks-lib/?path=/story/async-useasync--demo

useField

https://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useField.js

受控

https://beizhedenglong.github.io/react-hooks-lib/?path=/story/data-entry-usefield--demo

useEqualEffect

https://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useEqualEffect.js

useEffecf深比較

useActive

https://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useActive.js

滑鼠移入移出

useTouch

https://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useTouch.js

touch事件

useStateCallBack

https://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useStateCallback.js

setstate回調

useDidUpdate

https://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useDidUpdate.js

更新結束

useUndo

https://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useUndo.js

撤銷、反撤銷

useCookie.js

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useCookie.js

cookie

useCopyClipboard

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useCopyClipboard.js

複制到剪切闆

useDarkMode

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useDarkMode.js

夜間模式

useDimensions

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useDimensions.js

尺寸

useSize

https://ahooks.js.org/zh-CN/hooks/dom/use-size

useEventListener

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useEventListener.js

事件監聽

useFullScreen

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useFullScreen.js

全屏

useGeolocation

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useGeolocation.js

地理位置

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/geolocation

useIsClient

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useIsClient.js

檢查javascript是否從web用戶端加載

useKeyPress

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useKeyPress.js

鍵盤、按鍵

https://ahooks.js.org/zh-CN/hooks/dom/use-key-press

useLocalStorage

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useLocalStorage.js

localstorage

useLockBodyScroll

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useLockBodyScroll.js

body滾動

useMultiKeyPress

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useMultiKeyPress.js

組合按鍵

useNotification(不可用，但是notification值得看看)

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useNotification.js

通知

https://developer.mozilla.org/zh-CN/docs/Web/API/notification

useOnClickOutside

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useOnClickOutside.js

點選外部

useSpeechRecognition

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useSpeechRecognition.js

語音識别

https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

useWorker

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useWorker.js

service worker

useWindowSize

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useWindowSize.js

寬高

useWindowScroll

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useWindowScroll.js

滾動

useWhyDidYouUpdate

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useWhyDidYouUpdate.js

元件更新的原因

useSpeechSynthesis

https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useSpeechSynthesis.js

語音合成

https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis

語音

useBattery

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useBattery.ts

電池

useHash

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useHash.ts

路由

useIdle

https://github.com/ChinaLiuRixing/react-use/blob/master/docs/useIdle.md

檢測60s使用者無操作

useSearchParam

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useSearchParam.ts

url參數

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

useLongPress

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useLongPress.ts

鍵盤、按鍵、長按

useMediaDecices

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useMediaDevices.ts

裝置資訊

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices

useMotion

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useMotion.ts

裝置當時的加速度（移動端）

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicemotion_event

useMouse

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useMouse.ts

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useMouseHovered.ts

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useMouseWheel.ts

滑鼠

useNetwork

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useNetwork.ts

網絡狀态

useOrientation

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useOrientation.ts

螢幕方向

usePageLeave

https://github.com/ChinaLiuRixing/react-use/blob/master/src/usePageLeave.ts

滑鼠離開頁面

useStartTyping

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useStartTyping.ts

使用者開始輸入

useMeasure

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useMeasure.ts

useScrollbarWidth

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useScrollbarWidth.ts

滾動條寬度

useAudio

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useAudio.ts

audio

useDrop

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useDrop.ts

拖動、放置

useVibrate

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useVibrate.ts

震動

https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API

useSlider

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useSlider.ts

輪播

useVideo

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useVideo.ts

video

useUpdate

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useUpdate.ts

觸發元件render

useTween

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useTween.ts

補間動畫

https://www.npmjs.com/package/ts-easing

useRafLoop

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useRafLoop.ts

管理raf

useSessionStorage

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useSessionStorage.ts

sessionstorage

useFavicon

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useFavicon.ts

favicon

useLogger

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useLogger.ts

列印生命周期

useRendersCount

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useRendersCount.ts

監聽render次數、性能優化

useDoubleClick

https://github.com/zattoo/use-double-click

輕按兩下

useDeepCompare

https://github.com/sandiiarov/use-deep-compare

深比較

https://www.npmjs.com/package/dequal

react-communication

https://github.com/AvraamMavridis/react-window-communication-hook

頁面通信

lazyloadImg

react-use-lazy-load-image

圖檔懶加載

infiniteLoader

https://github.com/CurationCorp/react-use-infinite-loader

無線滾動

useIndexdb

https://github.com/kigiri/react-use-idb

indexdb

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

metatag

react-metatags-hook

meta

immerhooks

react-immer-hooks

不可變資料結構

hooksworker

https://github.com/dai-shi/react-hooks-worker

servers worker

imgSize

react-hooks-image-size

img url to size

statusHooks

https://github.com/yeskunall/react-dom-status-hook

性能監控、性能優化

clickOutside

react-cool-onclickoutside

點選到外部

webAnimation

https://github.com/wellyshen/use-web-animations

動畫

二、開源社群庫

ahooks 

Captain hook 

crooks

hooks-by-example

Hooks.guide 

react-recipes 

Searchable Collection of React Hooks

Sunflower(?) 

useHooks(?) 

Use Hooks 

beautiful-react-hooks(?)

三、參考

 ChinaLiuRixing/react-hookedup  

 ChinaLiuRixing/react-hooks-lib  

 ChinaLiuRixing/react-pirate  

 ChinaLiuRixing/react-recipes 

 ChinaLiuRixing/react-use  

 ChinaLiuRixing/awesome-react-hooks