yuvrajkarna2717/react-hook-granth

[Feature]: Add useEventListener hook

Ouverte

#2 ouverte le 6 déc. 2025

Voir sur GitHubGuide contributeur
 (0 commentaire) (0 réaction) (0 personne assignée)JavaScript (1 fork)auto 404
enhancementgood first issuehelp wanted

Métriques du dépôt

Stars
 (3 étoiles)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

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

Guide contributeur

Direction de recherche
Implémentez le hook useEventListener dans src/hooks/useEventListener.ts selon l'API proposée. Assurez vous qu'il fonctionne avec les éléments DOM, window et document, qu'il nettoie automatiquement lors du démontage, qu'il supporte TypeScript avec un typage d'événement approprié et qu'il soit compatible SSR. Écrivez des tests unitaires dans src/ tests /useEventListener.test.js et exportez depuis src/index.ts.
Stack technique
reacttypescriptjavascript
Domaine
frontend
Type d'issue
Fonctionnalité
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
ReactTypeScriptGit
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
80