Skip to content

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

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

sukvvon
Copy link
Contributor

@sukvvon sukvvon commented May 11, 2025

Overview

Checklist

  • Did you write the test code?
  • Have you run yarn run fix to format and lint the code and docs?
  • Have you run yarn run test:coverage to make sure there is no uncovered line?
  • Did you write the JSDoc?

@codecov-commenter
Copy link

codecov-commenter commented May 11, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (bea638d) to head (ebfe5b5).

Additional details and impacted files

Impacted file tree graph

@@            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:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@sukvvon sukvvon force-pushed the feat/add-useEventListener branch 3 times, most recently from ac3523a to 0bc7710 Compare May 11, 2025 15:57
@sukvvon sukvvon force-pushed the feat/add-useEventListener branch from 0bc7710 to 9f1ed15 Compare May 11, 2025 16:30
Comment on lines +30 to +39
* @example
* function ClickButton() {
* const buttonRef = useRef<HTMLButtonElement>(null);
*
* useEventListener('click', (event) => {
* console.log('Button clicked', event);
* }, buttonRef);
*
* return <button ref={buttonRef}>Click me</button>;
* }
Copy link
Member

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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jungpaeng

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.

Copy link
Member

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'

@sukvvon sukvvon requested a review from jungpaeng May 13, 2025 15:35
@sukvvon sukvvon force-pushed the feat/add-useEventListener branch from 5228b30 to c4472a3 Compare May 13, 2025 15:46
Comment on lines +58 to +60
* useEventListener('click', (event) => {
* console.log('Document clicked at coordinates', event.clientX, event.clientY);
* }, document);
Copy link
Member

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.

Suggested change
* 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'
* );

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants