From 0d3170287e30ab1b5f9d934f6c08294e4c4eadb8 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun, 1 Jun 2025 17:46:17 +0000 Subject: [PATCH 1/3] Generate docs for useLongPress --- src/hooks/useLongPress/ko/useLongPress.md | 69 ++++++----------------- src/hooks/useLongPress/useLongPress.md | 61 +++++--------------- 2 files changed, 30 insertions(+), 100 deletions(-) diff --git a/src/hooks/useLongPress/ko/useLongPress.md b/src/hooks/useLongPress/ko/useLongPress.md index 54d112a..ce35131 100644 --- a/src/hooks/useLongPress/ko/useLongPress.md +++ b/src/hooks/useLongPress/ko/useLongPress.md @@ -1,13 +1,13 @@ # useLongPress -`useLongPress`는 요소가 지정된 시간 동안 눌리고 유지되는 것을 감지하는 리액트 훅이에요. 마우스와 터치 이벤트를 모두 처리하여 데스크톱과 모바일 기기에서 일관되게 작동해요. +`useLongPress`는 사용자가 요소를 지정된 시간 동안 눌렀을 때를 감지하는 리액트 훅이에요. 이 훅은 마우스와 터치 이벤트를 모두 처리하여 데스크톱과 모바일 장치에서 일관되게 작동해요. ## 인터페이스 ```ts function useLongPress( onLongPress: (event: React.MouseEvent | React.TouchEvent) => void, - options: UseOptionsObject + options: Object ): Object; ``` @@ -17,51 +17,54 @@ function useLongPress( required name="onLongPress" type="(event: React.MouseEvent | React.TouchEvent) => void" - description="길게 누르기가 감지될 때 실행되는 콜백 함수예요." + description="롱 프레스가 감지되었을 때 실행되는 콜백 함수예요." /> + ### 반환 값 @@ -69,51 +72,13 @@ function useLongPress( ## 예시 ```tsx import { useLongPress } from 'react-simplikit'; -import { useState } from 'react'; function ContextMenu() { const [menuVisible, setMenuVisible] = useState(false); @@ -121,7 +86,7 @@ function ContextMenu() { const longPressHandlers = useLongPress(() => setMenuVisible(true), { delay: 400, onClick: () => console.log('일반 클릭'), - onLongPressEnd: () => console.log('길게 누르기 완료'), + onLongPressEnd: () => console.log('롱 프레스 완료'), }); return ( diff --git a/src/hooks/useLongPress/useLongPress.md b/src/hooks/useLongPress/useLongPress.md index 5af1365..134921b 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: Object ): Object; ``` @@ -19,6 +19,7 @@ function useLongPress( type="(event: React.MouseEvent | React.TouchEvent) => void" description="The callback function to be executed when a long press is detected." /> + ( type: 'number', required: false, defaultValue: '500', - description: 'The time in milliseconds before triggering the long press. Defaults to 500ms.' + description: + 'The time in milliseconds before triggering the long press. Defaults to 500ms.', }, { name: 'options.moveThreshold', type: 'Object', required: false, - description: 'Maximum movement allowed before canceling a long press.' + description: 'Maximum movement allowed before canceling a long press.', }, { name: 'options.moveThreshold.x', type: 'number', required: false, - description: 'Maximum horizontal movement in pixels.' + description: 'Maximum horizontal movement in pixels.', }, { name: 'options.moveThreshold.y', type: 'number', required: false, - description: 'Maximum vertical movement in pixels.' + description: 'Maximum vertical movement in pixels.', }, { name: 'options.onClick', type: '(event) => void', required: false, - description: 'Optional function to execute on a normal click (press and release before delay).' + description: + 'Optional function to execute on a normal click (press and release before delay).', }, { name: 'options.onLongPressEnd', type: '(event) => void', required: false, - description: 'Optional function to execute when a long press ends.' - } - ]" + description: 'Optional function to execute when a long press ends.', + }, + ]" /> ### Return Value @@ -69,51 +72,13 @@ function useLongPress( ## Example ```tsx import { useLongPress } from 'react-simplikit'; -import { useState } from 'react'; function ContextMenu() { const [menuVisible, setMenuVisible] = useState(false); From 9eeb43dc43474bc04c532e9c0e9e1fde1f1ee7b0 Mon Sep 17 00:00:00 2001 From: seungro Date: Mon, 2 Jun 2025 14:21:48 +0900 Subject: [PATCH 2/3] update docs --- src/hooks/useLongPress/ko/useLongPress.md | 50 ++++++++++++++--------- src/hooks/useLongPress/useLongPress.md | 26 ++++++++---- src/hooks/useLongPress/useLongPress.ts | 9 +++- 3 files changed, 58 insertions(+), 27 deletions(-) diff --git a/src/hooks/useLongPress/ko/useLongPress.md b/src/hooks/useLongPress/ko/useLongPress.md index ce35131..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: Object + options: UseLongPressOptions ): Object; ``` @@ -17,13 +17,13 @@ function useLongPress( required name="onLongPress" type="(event: React.MouseEvent | React.TouchEvent) => void" - description="롱 프레스가 감지되었을 때 실행되는 콜백 함수예요." + description="길게 누름이 감지되었을 때 실행될 콜백 함수예요." /> @@ -72,7 +72,16 @@ function useLongPress( ## 예시 @@ -83,15 +92,18 @@ import { useLongPress } from 'react-simplikit'; 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 134921b..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: Object + options: UseLongPressOptions ): Object; ``` @@ -22,7 +22,7 @@ function useLongPress( ## Example @@ -83,11 +92,14 @@ import { useLongPress } from 'react-simplikit'; 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'; From ad74fd4515b6998640fb50f08e6ab7abe3f48bae Mon Sep 17 00:00:00 2001 From: seungro Date: Mon, 2 Jun 2025 14:25:30 +0900 Subject: [PATCH 3/3] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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,