Skip to content

[URH-18] useLongPress 신규 #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 11, 2024
Merged

[URH-18] useLongPress 신규 #42

merged 1 commit into from
Aug 11, 2024

Conversation

suhyeoonn
Copy link
Contributor

👾 Pull Request

  • 상태: 신규

1️⃣ Spec

  • 사용자가 요소를 길게 눌렀을 때 콜백 함수를 호출하는 훅
  • 마우스, 터치 이벤트 지원

2️⃣ 변경 사항

  • 없음

3️⃣ 예시 코드

function App() {
  const [isLongPressed, setLongPressed] = useState(false);

  const attrs = useLongPress(() => {
    setLongPressed(true);
  });

  return (
    <div>
      <h1>{isLongPressed ? '✨ LONG PRESS ✨' : 'USE-REACT-HOOKS'}</h1>
      <button {...attrs}>PRESS</button>
      <button onClick={() => setLongPressed(false)}>RESET</button>
    </div>
  );
}

Copy link
Member

@jeongbaebang jeongbaebang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다 👍

Copy link
Member

@Choozii Choozii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🥇


useEffect(() => {
if (isPress) {
timeoutRef.current = setTimeout(callback, delay);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오... 어떻게 구현하셨을지 궁금했는데 너무 깔끔하고 명확하네요🔥 고생하셨어요 수현 님!

✅ test: useLongPress 테스트 코드 추가

📝 docs: useLongPress JSDoc 작성

🩹 chore: useEffect 클린업 시 timeoutRef null로 설정 및 setTimeout 콜백 함수 전달 방식 수정
@suhyeoonn suhyeoonn force-pushed the URH-18/use-long-press branch from dcc85db to 8ceab77 Compare August 11, 2024 23:45
@suhyeoonn suhyeoonn merged commit be3d40e into master Aug 11, 2024
@suhyeoonn suhyeoonn deleted the URH-18/use-long-press branch August 11, 2024 23:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants