useEventTarget
High Order function for hooks of EventTarget
讓你無憂無慮註冊事件,匿名函數也好,不想清理也罷,反正我幫你清掉。 One hook for one eventTarget's event.
使用高階函數創造毫無副作用的 useResize
// useResize.js;const useWindow = ; const $window resizeOff = ; return resizeOff;;
Watch this useResize
直接在函數組件使用無副作用的事件掛載
;const useImage = ;const demo={ ; return <p>I am demo component</p>;}
別怕!只會在 mount 那刻註冊。
API 同註冊事件(addEventListener
),但是組件週期卸載後會幫你清掉(removeEventListener
)。
Installation
$ npm install use-event-target
Compare
若你曾經撰寫過與原生事件相關的 React Hooks ,對下面的狀況肯定不陌生:
//useCustom;
使用 useEventTarget
const useWindow = ;//useCustom;;;
再看一次 Demo
我做了什麼?
-
首先我用 curry 的方式製造了一個 Custom Hooks,讓你可以在函數組件中使用。
-
我用 useEffect 的 compare array 去設定,只有 mount 的時候會幫你註冊。
-
我偷偷把你的 callback 給 reference 了,所以可以清除掉匿名函數。
-
我在 cleanup 裡頭幫你清除掉,而這個 cleanup 會依照你使用這個 custom hook 的組件週期。
Advanced usage
useEventTarget 主要是丟進去 EventTarget ,並且製造出 customHooks ,這個 customHooks 將回傳一個陣列。
我們先假設 useImage 已經製造出來。
const $img loadOff = ;
$img
也就是這個 EventTarget ,有時候我們希望能改變他的屬性。
hookEvent
你可以透過 hookEvent 重置你要掛載的事件,用法:
- 主動清掉剛剛掛載的事件
const $imgoffEvent = // In some condition ; //主動把事件清掉
- 讓事件與組件同步卸載
Example
;const useImage = ;const demo = { const $imgloadOff = ; { ; }; return <button onClick=onClick> Get Image </button>;};
More...
useFileReader
; const demo = { const useFileReader = ; const $reader offEvent = ; const onInputChange = { const files = ecurrentTargetfiles; $reader; }; return <input onChange=onInputChange type="file" id="upload-file" placeholder="Upload a Picture" /> ;};