yuvrajkarna2717/react-hook-granth

[Feature]: Add useEventListener hook

Aberta

#2 aberto em 6 de dez. de 2025

Ver no GitHubGuia do colaborador
 (0 comentário) (0 reação) (0 responsável)JavaScript (1 fork)auto 404
enhancementgood first issuehelp wanted

Métricas do repositório

Stars
 (3 estrelas)
Métricas de merge de PR
 (Métricas PR pendentes)

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

Guia do colaborador

Direção de pesquisa
Implemente o hook useEventListener em src/hooks/useEventListener.ts seguindo a API proposta. Certifique se de que funcione com elementos DOM, window e document, limpe automaticamente ao desmontar, suporte TypeScript com tipagem de evento adequada e seja seguro para SSR. Escreva testes unitários em src/ tests /useEventListener.test.js e exporte de src/index.ts.
Pilha de tecnologia
reacttypescriptjavascript
Domain
frontend
Tipo Issue
Funcionalidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
ReactTypeScriptGit
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
80