diff --git a/package.json b/package.json index 7ff2a58..c0a55b6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-simplikit", - "version": "0.0.34", + "version": "0.0.35", "main": "./src/index.ts", "type": "module", "sideEffects": false, diff --git a/src/hooks/useLongPress/ko/useLongPress.md b/src/hooks/useLongPress/ko/useLongPress.md index 54d112a..ca22eb6 100644 --- a/src/hooks/useLongPress/ko/useLongPress.md +++ b/src/hooks/useLongPress/ko/useLongPress.md @@ -1,13 +1,13 @@ # useLongPress -`useLongPress`는 요소가 지정된 시간 동안 눌리고 유지되는 것을 감지하는 리액트 훅이에요. 마우스와 터치 이벤트를 모두 처리하여 데스크톱과 모바일 기기에서 일관되게 작동해요. +`useLongPress`는 요소가 지정된 기간 동안 눌려지고 유지될 때를 감지하는 리액트 훅이에요. 마우스와 터치 이벤트를 모두 처리하여 데스크탑과 모바일 장치에서 일관되게 작동해요. -## 인터페이스 +## Interface ```ts function useLongPress( onLongPress: (event: React.MouseEvent | React.TouchEvent) => void, - options: UseOptionsObject + options: UseLongPressOptions ): Object; ``` @@ -17,51 +17,54 @@ function useLongPress( required name="onLongPress" type="(event: React.MouseEvent | React.TouchEvent) => void" - description="길게 누르기가 감지될 때 실행되는 콜백 함수예요." + description="길게 누름이 감지되었을 때 실행될 콜백 함수예요." /> + ### 반환 값 @@ -69,64 +72,38 @@ function useLongPress( ## 예시 ```tsx import { useLongPress } from 'react-simplikit'; -import { useState } from 'react'; function ContextMenu() { const [menuVisible, setMenuVisible] = useState(false); - const longPressHandlers = useLongPress(() => setMenuVisible(true), { - delay: 400, - onClick: () => console.log('일반 클릭'), - onLongPressEnd: () => console.log('길게 누르기 완료'), - }); + const longPressHandlers = useLongPress( + () => setMenuVisible(true), + { + delay: 400, + onClick: () => console.log('일반 클릭'), + onLongPressEnd: () => console.log('길게 누름 완료') + } + ); return (
- + {menuVisible &&
컨텍스트 메뉴
}
); diff --git a/src/hooks/useLongPress/useLongPress.md b/src/hooks/useLongPress/useLongPress.md index 5af1365..841a65c 100644 --- a/src/hooks/useLongPress/useLongPress.md +++ b/src/hooks/useLongPress/useLongPress.md @@ -7,7 +7,7 @@ ```ts function useLongPress( onLongPress: (event: React.MouseEvent | React.TouchEvent) => void, - options: UseOptionsObject + options: UseLongPressOptions ): Object; ``` @@ -19,9 +19,10 @@ function useLongPress( type="(event: React.MouseEvent | React.TouchEvent) => void" description="The callback function to be executed when a long press is detected." /> + ### Return Value @@ -69,60 +72,34 @@ function useLongPress( ## Example ```tsx import { useLongPress } from 'react-simplikit'; -import { useState } from 'react'; function ContextMenu() { const [menuVisible, setMenuVisible] = useState(false); - const longPressHandlers = useLongPress(() => setMenuVisible(true), { - delay: 400, - onClick: () => console.log('Normal click'), - onLongPressEnd: () => console.log('Long press completed'), - }); + const longPressHandlers = useLongPress( + () => setMenuVisible(true), + { + delay: 400, + onClick: () => console.log('Normal click'), + onLongPressEnd: () => console.log('Long press completed') + } + ); return (
diff --git a/src/hooks/useLongPress/useLongPress.ts b/src/hooks/useLongPress/useLongPress.ts index 5192570..9c8a760 100644 --- a/src/hooks/useLongPress/useLongPress.ts +++ b/src/hooks/useLongPress/useLongPress.ts @@ -20,7 +20,7 @@ export type UseLongPressOptions = { * * @template {HTMLElement} E - The HTML element type that will use the long press handlers. * @param {(event: React.MouseEvent | React.TouchEvent) => void} onLongPress - The callback function to be executed when a long press is detected. - * @param {Object} [options] - Configuration options for the long press behavior. + * @param {UseLongPressOptions} [options] - Configuration options for the long press behavior. * @param {number} [options.delay=500] - The time in milliseconds before triggering the long press. Defaults to 500ms. * @param {Object} [options.moveThreshold] - Maximum movement allowed before canceling a long press. * @param {number} [options.moveThreshold.x] - Maximum horizontal movement in pixels. @@ -29,6 +29,13 @@ export type UseLongPressOptions = { * @param {(event) => void} [options.onLongPressEnd] - Optional function to execute when a long press ends. * * @returns {Object} Event handlers to attach to an element. + * - onMouseDown `(event: MouseEvent | TouchEvent) => void` - Event handler for mouse down events. + * - onMouseUp `(event: MouseEvent | TouchEvent) => void` - Event handler for mouse up events. + * - onMouseLeave `(event: MouseEvent | TouchEvent) => void` - Event handler for mouse leave events. + * - onTouchStart `(event: MouseEvent | TouchEvent) => void` - Event handler for touch start events. + * - onTouchEnd `(event: MouseEvent | TouchEvent) => void` - Event handler for touch end events. + * - onMouseMove `(event: MouseEvent | TouchEvent) => void` - Event handler for mouse move events. Included if `moveThreshold` is provided. + * - onTouchMove `(event: MouseEvent | TouchEvent) => void` - Event handler for touch move events. Included if `moveThreshold` is provided. * * @example * import { useLongPress } from 'react-simplikit';