diff --git a/src/hooks/useDoubleClick/ko/useDoubleClick.md b/src/hooks/useDoubleClick/ko/useDoubleClick.md new file mode 100644 index 00000000..1b286dac --- /dev/null +++ b/src/hooks/useDoubleClick/ko/useDoubleClick.md @@ -0,0 +1,71 @@ +# useDoubleClick + +`useDoubleClick`는 단일 클릭과 더블 클릭 이벤트를 구분하는 리액트 훅이에요. 지정된 시간 동안 단일 클릭 콜백 실행을 지연시키고, 그 시간 안에 두 번째 클릭(즉, 더블 클릭)이 발생하면 이를 취소해요. + +## 인터페이스 + +```ts +function useDoubleClick( + params: Object +): (event: MouseEvent) => void; +``` + +### 파라미터 + + + +### 반환 값 + + + +## 예시 + +```tsx +function GalleryCard() { + const [selected, setSelected] = useState(false); + + const handleClick = () => setSelected(prev => !prev); + const handleDoubleClick = () => alert('확대해요!'); + + const handleEvent = useDoubleClick({ + click: handleClick, + doubleClick: handleDoubleClick, + }); + + return ( +
{selected ? '선택됨' : '선택되지 않음'}
+ ); +} +``` diff --git a/src/hooks/useDoubleClick/useDoubleClick.md b/src/hooks/useDoubleClick/useDoubleClick.md new file mode 100644 index 00000000..da2333e2 --- /dev/null +++ b/src/hooks/useDoubleClick/useDoubleClick.md @@ -0,0 +1,71 @@ +# useDoubleClick + +`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. + +## Interface + +```ts +function useDoubleClick( + params: Object +): (event: MouseEvent) => void; +``` + +### Parameters + + + +### Return Value + + + +## Example + +```tsx +function GalleryCard() { + const [selected, setSelected] = useState(false); + + const handleClick = () => setSelected(prev => !prev); + const handleDoubleClick = () => alert('Zoom in!'); + + const handleEvent = useDoubleClick({ + click: handleClick, + doubleClick: handleDoubleClick, + }); + + return ( +
{selected ? 'Selected' : 'Not selected'}
+ ); +} +```