Skip to content

Commit 465eeb8

Browse files
docs(useDoubleClick): auto-generated docs (#208)
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: seungrodotlee <seungrodotlee@gmail.com>
1 parent f976380 commit 465eeb8

2 files changed

Lines changed: 142 additions & 0 deletions

File tree

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# useDoubleClick
2+
3+
`useDoubleClick`는 단일 클릭과 더블 클릭 이벤트를 구분하는 리액트 훅이에요. 지정된 시간 동안 단일 클릭 콜백 실행을 지연시키고, 그 시간 안에 두 번째 클릭(즉, 더블 클릭)이 발생하면 이를 취소해요.
4+
5+
## 인터페이스
6+
7+
```ts
8+
function useDoubleClick<E extends HTMLElement>(
9+
params: Object
10+
): (event: MouseEvent<E>) => void;
11+
```
12+
13+
### 파라미터
14+
15+
<Interface
16+
required
17+
name="params"
18+
type="Object"
19+
description="클릭 처리를 위한 설정 옵션이에요."
20+
:nested="[
21+
{
22+
name: 'params.delay',
23+
type: 'number',
24+
required: false,
25+
defaultValue: '250',
26+
description:
27+
'단일 클릭 콜백을 실행하기 전에 기다릴 밀리초 수예요. 기본값은 250ms예요.',
28+
},
29+
{
30+
name: 'params.click',
31+
type: '(event: MouseEvent<E>) => void',
32+
required: false,
33+
description: '단일 클릭 시 실행될 콜백 함수예요.',
34+
},
35+
{
36+
name: 'params.doubleClick',
37+
type: '(event: MouseEvent<E>) => void',
38+
required: true,
39+
description:
40+
'더블 클릭 시 실행될 콜백 함수예요. 필수예요.',
41+
},
42+
]"
43+
/>
44+
45+
### 반환 값
46+
47+
<Interface
48+
name=""
49+
type="(event: MouseEvent<E>) => void"
50+
description="요소의 <code>onClick</code> 이벤트에 첨부할 클릭 핸들러 함수예요."
51+
/>
52+
53+
## 예시
54+
55+
```tsx
56+
function GalleryCard() {
57+
const [selected, setSelected] = useState(false);
58+
59+
const handleClick = () => setSelected(prev => !prev);
60+
const handleDoubleClick = () => alert('확대해요!');
61+
62+
const handleEvent = useDoubleClick({
63+
click: handleClick,
64+
doubleClick: handleDoubleClick,
65+
});
66+
67+
return (
68+
<div onClick={handleEvent}>{selected ? '선택됨' : '선택되지 않음'}</div>
69+
);
70+
}
71+
```
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# useDoubleClick
2+
3+
`useDoubleClick` is a React hook that differentiates between single and double click events. It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
4+
5+
## Interface
6+
7+
```ts
8+
function useDoubleClick<E extends HTMLElement>(
9+
params: Object
10+
): (event: MouseEvent<E>) => void;
11+
```
12+
13+
### Parameters
14+
15+
<Interface
16+
required
17+
name="params"
18+
type="Object"
19+
description="Configuration options for click handling."
20+
:nested="[
21+
{
22+
name: 'params.delay',
23+
type: 'number',
24+
required: false,
25+
defaultValue: '250',
26+
description:
27+
'The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.',
28+
},
29+
{
30+
name: 'params.click',
31+
type: '(event: MouseEvent<E>) => void',
32+
required: false,
33+
description: 'The callback function to be executed on a single click.',
34+
},
35+
{
36+
name: 'params.doubleClick',
37+
type: '(event: MouseEvent<E>) => void',
38+
required: true,
39+
description:
40+
'The callback function to be executed on a double click. Required.',
41+
},
42+
]"
43+
/>
44+
45+
### Return Value
46+
47+
<Interface
48+
name=""
49+
type="(event: MouseEvent<E>) => void"
50+
description="click handler function to attach to an element's <code>onClick</code> event."
51+
/>
52+
53+
## Example
54+
55+
```tsx
56+
function GalleryCard() {
57+
const [selected, setSelected] = useState(false);
58+
59+
const handleClick = () => setSelected(prev => !prev);
60+
const handleDoubleClick = () => alert('Zoom in!');
61+
62+
const handleEvent = useDoubleClick({
63+
click: handleClick,
64+
doubleClick: handleDoubleClick,
65+
});
66+
67+
return (
68+
<div onClick={handleEvent}>{selected ? 'Selected' : 'Not selected'}</div>
69+
);
70+
}
71+
```

0 commit comments

Comments
 (0)