-
Notifications
You must be signed in to change notification settings - Fork 44
feat(hooks): add 'useEventListener' #237
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #237 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 33 34 +1
Lines 836 853 +17
Branches 254 260 +6
=========================================
+ Hits 836 853 +17 🚀 New features to boost your workflow:
|
ac3523a
to
0bc7710
Compare
0bc7710
to
9f1ed15
Compare
…ject element case
* @example | ||
* function ClickButton() { | ||
* const buttonRef = useRef<HTMLButtonElement>(null); | ||
* | ||
* useEventListener('click', (event) => { | ||
* console.log('Button clicked', event); | ||
* }, buttonRef); | ||
* | ||
* return <button ref={buttonRef}>Click me</button>; | ||
* } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does this have any better use than just using the onClick function?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This example isn’t meant to suggest that useEventListener
is better than onClick
— it’s just a simple way to demonstrate how the hook works with a ref.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess it will useful when using 'CustomEvent'
5228b30
to
c4472a3
Compare
* useEventListener('click', (event) => { | ||
* console.log('Document clicked at coordinates', event.clientX, event.clientY); | ||
* }, document); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This implementation does not appear to be safe in an SSR (Server-Side Rendering) environment. Directly referencing client-side global variables such as document seems risky. We should look for a way to ensure safe operation even in SSR environments.
For example, when you need to attach handlers to client-side global variables like document
or window
, instead of referencing them directly, you can pass them as strings like 'document'
or 'window'
. Then, inside a useEffect
, you can safely access them conditionally. This approach can help ensure stability in SSR environments.
* useEventListener('click', (event) => { | |
* console.log('Document clicked at coordinates', event.clientX, event.clientY); | |
* }, document); | |
* useEventListener('click', (event) => { | |
* console.log('Document clicked at coordinates', event.clientX, event.clientY); | |
* }, | |
* // ensure that `document` is only referenced on the client side. | |
* 'document' | |
* ); |
Overview
Checklist
yarn run fix
to format and lint the code and docs?yarn run test:coverage
to make sure there is no uncovered line?