usePressTap

Import

import { usePressTap } from "@seed-design/lynx-react";

usePressTap은 @seed-design/lynx-react 패키지에 포함되어 있습니다.

Usage

기본 사용

import { usePressTap } from "@seed-design/lynx-react";

function TappableCard() {
  const { pressed, ...handlers } = usePressTap({
    onTap: () => {
      "background only";
      console.log("tapped!");
    },
  });

  return (
    <view {...handlers}>
      <text>{pressed ? "Pressing..." : "Tap me"}</text>
    </view>
  );
}

Disabled 상태

function DisabledButton({ disabled }: { disabled: boolean }) {
  const { pressed, ...handlers } = usePressTap({
    disabled,
    onTap: () => {
      "background only";
      console.log("won't fire when disabled");
    },
  });

  return <view {...handlers}><text>Button</text></view>;
}

Main Thread 이벤트

import { usePressTap } from "@seed-design/lynx-react";

function AnimatedButton() {
  const mainThreadTap = () => {
    "main thread";
    // main thread에서 실행되는 애니메이션 로직
  };

  const { pressed, ...handlers } = usePressTap({
    onTap: () => {
      "background only";
      console.log("tapped");
    },
    mainThreadOnTap: mainThreadTap,
  });

  return <view {...handlers}><text>Animated</text></view>;
}

API

Options

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	`true`일 때 press 상태 변경과 tap 이벤트가 차단됩니다.
`onTap`	`() => void`	-	탭 시 호출되는 콜백입니다.
`mainThreadOnTap`	`() => void`	-	Main thread에서 실행되는 탭 콜백입니다. `disabled` 시 바인딩되지 않습니다.

Return

Property	Type	Description
`pressed`	`boolean`	현재 press 상태입니다.
`bindtap`	`(e: TouchEvent) => void`	탭 이벤트 핸들러입니다.
`bindtouchstart`	`(e: TouchEvent) => void`	터치 시작 핸들러입니다.
`bindtouchend`	`(e: TouchEvent) => void`	터치 종료 핸들러입니다.
`bindtouchcancel`	`(e: TouchEvent) => void`	터치 취소 핸들러입니다.
`main-thread:bindtap`	`(() => void) \| undefined`	Main thread 탭 핸들러입니다. `disabled`이거나 `mainThreadOnTap`이 미제공이면 포함되지 않습니다.

CSS 스타일링 참고

SEED Lynx 컴포넌트는 pressed 상태를 recipe의 boolean variant로 전달하고, 생성된 className 조합으로 press 스타일을 표현합니다. Web처럼 :active pseudo-class나 data-active selector에 기대지 않습니다.

const { pressed, ...pressHandlers } = usePressTap({ onTap });
const classNames = actionButton({ pressed });

웹 버전과의 차이

항목	Lynx (`usePressTap`)	Web (`usePress` 등)
이벤트 모델	`bindtap`, `bindtouchstart/end/cancel`	`onPointerDown/Up/Move`, `onClick`
Press 감지	터치 이벤트 기반	포인터 이벤트 기반
Hover 지원	없음 (모바일 전용)	`isHovered` 상태 포함
Focus 지원	없음	`isFocused`, `isFocusVisible` 포함
Main thread	`main-thread:bindtap` 지원	해당 없음
CSS 연동	네이티브 `:active` 자동 적용	`data-active` attribute selector

usePressTap

On this page