createEventTargetHook
Create hooks of EventTarget and no worry about side effect
Create the hook to register native event like window.addEventListener, and cleanup (remove) automatically.
Installation
$ npm install create-event-target-hook
Compare
If you have use some native event in React, the cleanup show in below is really common
//useCustom;
Using createEventTargetHook
const useWindow = ;//useCustom;;;
What did createEventTargetHook do?
-
I create a curry function, and make a corresponding custom hooks
-
Only
addEventListener
when mount, I promise. -
I keep a reference of the annoymous callback, so I can remove the annoymous listener.
-
The function of cleaning the event listener will follow the hook life-cycle.
Advanced usage
This customHooks will return an array
We assume useImage
has already made. (by createEventTargetHook
)
const $img loadOff = ;
$img
$img
is the EventTarget, sometimes we hope we could modify its attribute.
off
You can use off to remove listener.
- Remove the event listener initiative.
const $img off = ;// In some condition ;
- Remove when something done.
Example
;const useImage = ;const demo = { const $img loadOff = ; { ; } return <button onClick=onClick> Get Image </button>;};
More...
useFileReader
;const useFileReader = ; const demo = { const $reader offEvent = ; const onInputChange = { const files = ecurrentTargetfiles; $reader; }; return <input onChange=onInputChange type="file" id="upload-file" placeholder="Upload a Picture" /> ;};