@usefy/use-event-listener 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +46 -35
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -110,32 +110,32 @@ A hook that adds an event listener to the specified target.
110
110
 
111
111
  #### Parameters
112
112
 
113
- | Parameter | Type | Description |
114
- | ----------- | ------------------------- | ---------------------------------------------------- |
113
+ | Parameter | Type | Description |
114
+ | ----------- | ------------------------- | ------------------------------------------------------ |
115
115
  | `eventName` | `string` | The event type to listen for (e.g., "click", "resize") |
116
- | `handler` | `(event: Event) => void` | Callback function called when the event fires |
117
- | `element` | `EventTargetType` | Target element (defaults to window) |
118
- | `options` | `UseEventListenerOptions` | Configuration options |
116
+ | `handler` | `(event: Event) => void` | Callback function called when the event fires |
117
+ | `element` | `EventTargetType` | Target element (defaults to window) |
118
+ | `options` | `UseEventListenerOptions` | Configuration options |
119
119
 
120
120
  #### Options
121
121
 
122
- | Option | Type | Default | Description |
123
- | --------- | --------- | ----------- | ------------------------------------------------ |
124
- | `enabled` | `boolean` | `true` | Whether the event listener is active |
125
- | `capture` | `boolean` | `false` | Use event capture phase instead of bubble |
126
- | `passive` | `boolean` | `undefined` | Use passive event listener for performance |
127
- | `once` | `boolean` | `false` | Handler is invoked once and then removed |
122
+ | Option | Type | Default | Description |
123
+ | --------- | --------- | ----------- | ------------------------------------------ |
124
+ | `enabled` | `boolean` | `true` | Whether the event listener is active |
125
+ | `capture` | `boolean` | `false` | Use event capture phase instead of bubble |
126
+ | `passive` | `boolean` | `undefined` | Use passive event listener for performance |
127
+ | `once` | `boolean` | `false` | Handler is invoked once and then removed |
128
128
 
129
129
  #### Supported Target Types
130
130
 
131
131
  ```typescript
132
132
  type EventTargetType<T extends HTMLElement = HTMLElement> =
133
- | Window // window object
134
- | Document // document object
135
- | HTMLElement // any HTML element
136
- | React.RefObject<T> // React ref
137
- | null // no listener
138
- | undefined; // defaults to window
133
+ | Window // window object
134
+ | Document // document object
135
+ | HTMLElement // any HTML element
136
+ | React.RefObject<T> // React ref
137
+ | null // no listener
138
+ | undefined; // defaults to window
139
139
  ```
140
140
 
141
141
  #### Returns
@@ -351,7 +351,10 @@ This hook provides full type inference for event types:
351
351
 
352
352
  ```tsx
353
353
  import { useEventListener } from "@usefy/use-event-listener";
354
- import type { UseEventListenerOptions, EventTargetType } from "@usefy/use-event-listener";
354
+ import type {
355
+ UseEventListenerOptions,
356
+ EventTargetType,
357
+ } from "@usefy/use-event-listener";
355
358
 
356
359
  // MouseEvent is automatically inferred
357
360
  useEventListener("click", (e) => {
@@ -359,14 +362,22 @@ useEventListener("click", (e) => {
359
362
  });
360
363
 
361
364
  // KeyboardEvent is automatically inferred
362
- useEventListener("keydown", (e) => {
363
- console.log(e.key); // e is KeyboardEvent
364
- }, document);
365
+ useEventListener(
366
+ "keydown",
367
+ (e) => {
368
+ console.log(e.key); // e is KeyboardEvent
369
+ },
370
+ document
371
+ );
365
372
 
366
373
  // FocusEvent is automatically inferred
367
- useEventListener("focus", (e) => {
368
- console.log(e.relatedTarget); // e is FocusEvent
369
- }, inputRef);
374
+ useEventListener(
375
+ "focus",
376
+ (e) => {
377
+ console.log(e.relatedTarget); // e is FocusEvent
378
+ },
379
+ inputRef
380
+ );
370
381
 
371
382
  // Options type
372
383
  const options: UseEventListenerOptions = {
@@ -478,17 +489,17 @@ pnpm test --coverage
478
489
 
479
490
  Explore other hooks in the **@usefy** collection:
480
491
 
481
- | Package | Description |
482
- | ------------------------------------------------------------------------------------------ | ----------------------------------- |
483
- | [@usefy/use-click-any-where](https://www.npmjs.com/package/@usefy/use-click-any-where) | Document-wide click detection |
484
- | [@usefy/use-on-click-outside](https://www.npmjs.com/package/@usefy/use-on-click-outside) | Outside click detection |
485
- | [@usefy/use-toggle](https://www.npmjs.com/package/@usefy/use-toggle) | Boolean state management |
486
- | [@usefy/use-counter](https://www.npmjs.com/package/@usefy/use-counter) | Counter state management |
487
- | [@usefy/use-debounce](https://www.npmjs.com/package/@usefy/use-debounce) | Value debouncing |
488
- | [@usefy/use-throttle](https://www.npmjs.com/package/@usefy/use-throttle) | Value throttling |
489
- | [@usefy/use-local-storage](https://www.npmjs.com/package/@usefy/use-local-storage) | localStorage state synchronization |
490
- | [@usefy/use-session-storage](https://www.npmjs.com/package/@usefy/use-session-storage) | sessionStorage state synchronization|
491
- | [@usefy/use-copy-to-clipboard](https://www.npmjs.com/package/@usefy/use-copy-to-clipboard) | Clipboard operations |
492
+ | Package | Description |
493
+ | ------------------------------------------------------------------------------------------ | ------------------------------------ |
494
+ | [@usefy/use-click-any-where](https://www.npmjs.com/package/@usefy/use-click-any-where) | Document-wide click detection |
495
+ | [@usefy/use-on-click-outside](https://www.npmjs.com/package/@usefy/use-on-click-outside) | Outside click detection |
496
+ | [@usefy/use-toggle](https://www.npmjs.com/package/@usefy/use-toggle) | Boolean state management |
497
+ | [@usefy/use-counter](https://www.npmjs.com/package/@usefy/use-counter) | Counter state management |
498
+ | [@usefy/use-debounce](https://www.npmjs.com/package/@usefy/use-debounce) | Value debouncing |
499
+ | [@usefy/use-throttle](https://www.npmjs.com/package/@usefy/use-throttle) | Value throttling |
500
+ | [@usefy/use-local-storage](https://www.npmjs.com/package/@usefy/use-local-storage) | localStorage state synchronization |
501
+ | [@usefy/use-session-storage](https://www.npmjs.com/package/@usefy/use-session-storage) | sessionStorage state synchronization |
502
+ | [@usefy/use-copy-to-clipboard](https://www.npmjs.com/package/@usefy/use-copy-to-clipboard) | Clipboard operations |
492
503
 
493
504
  ---
494
505
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usefy/use-event-listener",
3
- "version": "0.0.16",
3
+ "version": "0.0.18",
4
4
  "description": "A React hook for adding event listeners to DOM elements with automatic cleanup",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",