yuvrajkarna2717/react-hook-granth

[Feature]: Add useEventListener hook

Open

#2 opened on Dec 6, 2025

View on GitHubContributor guide
 (0 comments) (0 reactions) (0 assignees)JavaScript (1 fork)auto 404
enhancementgood first issuehelp wanted

Repository metrics

Stars
 (3 stars)
PR merge metrics
 (PR metrics pending)

Description

Hook Name

useEventListener

Feature Description

Description: Create a useEventListener hook that provides a clean way to attach and detach event listeners in React components.

Requirements:

  • Should work with DOM elements, window, and document
  • Automatically clean up listeners on unmount
  • TypeScript support with proper event typing
  • SSR safe

Acceptance Criteria:

  • Hook implementation in src/hooks/useEventListener.ts
  • Export from src/index.ts
  • Unit tests in src/__tests__/useEventListener.test.js
  • TypeScript definitions

Use Case

It provides a clean way to attach and detach event listeners in React components.

Proposed API

API Proposal:

useEventListener('click', handleClick, elementRef);
useEventListener('resize', handleResize); // defaults to window

Contributor guide

Research direction
Implement the useEventListener hook in src/hooks/useEventListener.ts following the proposed API. Ensure it works with DOM elements, window, and document, automatically cleans up on unmount, supports TypeScript with proper event typing, and is SSR safe. Write unit tests in src/ tests /useEventListener.test.js and export from src/index.ts.
Tech stack
reacttypescriptjavascript
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactTypeScriptGit
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80