Skip to content

Commit

Permalink
feat: support for array as event parameter in useEventListener (#2598)
Browse files Browse the repository at this point in the history
* style: change the default import to import on demand

* feat: support for array as event parameter in useEventListener

* feat: review后修改

---------

Co-authored-by: lxr <[email protected]>
  • Loading branch information
askwuxue and crazylxr authored Aug 21, 2024
1 parent 7947903 commit eb700b9
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 19 deletions.
28 changes: 28 additions & 0 deletions packages/hooks/src/useEventListener/__tests__/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,34 @@ describe('useEventListener', () => {
expect(state).toBe(1);
});

it('test on event list listener', async () => {
let state: number = 0;
const onClick = () => {
state++;
};
const onKeydown = () => {
state++;
};
const { rerender, unmount } = renderHook(
() => (
useEventListener('click', onClick, { target: () => container }),
useEventListener('keydown', onKeydown, { target: () => container })
),
);

document.body.click();
document.body.dispatchEvent(new KeyboardEvent('keydown'));
expect(state).toBe(0);
rerender();
container.click();
container.dispatchEvent(new KeyboardEvent('keydown'));
expect(state).toBe(2);
unmount();
document.body.click();
document.body.dispatchEvent(new KeyboardEvent('keydown'));
expect(state).toBe(2);
});

it('test "enable" parameter', () => {
let state = 0;
let enable = true;
Expand Down
29 changes: 29 additions & 0 deletions packages/hooks/src/useEventListener/demo/demo3.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
* title: Listen to multiple events.
* desc: Mouse hover or over the button to preview.
*
* title.zh-CN: 监听多个事件
* desc.zh-CN: 鼠标移入移出按钮查看效果。
*/

import React, { useRef, useState } from 'react';
import { useEventListener } from 'ahooks';

export default () => {
const ref = useRef(null);
const [value, setValue] = useState('');

useEventListener(
['mouseenter', 'mouseleave'],
(ev) => {
setValue(ev.type);
},
{ target: ref },
);

return (
<button ref={ref} type="button">
You Option is {value}
</button>
);
};
14 changes: 9 additions & 5 deletions packages/hooks/src/useEventListener/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ Use addEventListener elegant by Hook.

<code src="./demo/demo2.tsx" />

### Listen for multiple events

<code src="./demo/demo3.tsx" />

## API

```typescript
Expand All @@ -29,11 +33,11 @@ useEventListener(

### Property

| Property | Description | type | default |
| --------- | ---------------------- | --------------------- | ------- |
| eventName | Event name | `string` | - |
| handler | Callback function | `(ev: Event) => void` | - |
| options | More options(optional) | `Options` | - |
| Property | Description | type | default |
| --------- | ---------------------- | ---------------------- | ------- |
| eventName | Event name | `string` \| `string[]` | - |
| handler | Callback function | `(ev: Event) => void` | - |
| options | More options(optional) | `Options` | - |

### Options

Expand Down
24 changes: 15 additions & 9 deletions packages/hooks/src/useEventListener/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ function useEventListener<K extends keyof WindowEventMap>(
options?: Options<Window>,
): void;
function useEventListener(
eventName: string,
eventName: string | string[],
handler: (event: Event) => void,
options?: Options<Window>,
): void;
function useEventListener(eventName: string, handler: noop, options: Options): void;
function useEventListener(eventName: string | string[], handler: noop, options: Options): void;

function useEventListener(eventName: string, handler: noop, options: Options = {}) {
function useEventListener(eventName: string | string[], handler: noop, options: Options = {}) {
const { enable = true } = options;

const handlerRef = useLatest(handler);
Expand All @@ -62,15 +62,21 @@ function useEventListener(eventName: string, handler: noop, options: Options = {
return handlerRef.current(event);
};

targetElement.addEventListener(eventName, eventListener, {
capture: options.capture,
once: options.once,
passive: options.passive,
const eventNameArray = Array.isArray(eventName) ? eventName : [eventName];

eventNameArray.forEach((event) => {
targetElement.addEventListener(event, eventListener, {
capture: options.capture,
once: options.once,
passive: options.passive,
});
});

return () => {
targetElement.removeEventListener(eventName, eventListener, {
capture: options.capture,
eventNameArray.forEach((event) => {
targetElement.removeEventListener(event, eventListener, {
capture: options.capture,
});
});
};
},
Expand Down
14 changes: 9 additions & 5 deletions packages/hooks/src/useEventListener/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ nav:

<code src="./demo/demo2.tsx" />

### 监听多个事件

<code src="./demo/demo3.tsx" />

## API

```typescript
Expand All @@ -29,11 +33,11 @@ useEventListener(

### Params

| 参数 | 说明 | 类型 | 默认值 |
| --------- | ---------- | --------------------- | ------ |
| eventName | 事件名称 | `string` | - |
| handler | 处理函数 | `(ev: Event) => void` | - |
| options | 设置(可选) | `Options` | - |
| 参数 | 说明 | 类型 | 默认值 |
| --------- | ---------- | ---------------------- | ------ |
| eventName | 事件名称 | `string` \| `string[]` | - |
| handler | 处理函数 | `(ev: Event) => void` | - |
| options | 设置(可选) | `Options` | - |

### Options

Expand Down

0 comments on commit eb700b9

Please sign in to comment.