useCustomCursor

@hua-labs/hua/motion

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useCustomCursor } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

const cursor = useCustomCursor();

return (
  <>
    <div style={cursor.style} className="custom-cursor" />
    <button data-cursor="Click me">Hover me</button>
  </>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
enabled	boolean	true	docs:hooks.use-custom-cursor.options.enabled
size	number	32	docs:hooks.use-custom-cursor.options.size
smoothing	number	0.15	docs:hooks.use-custom-cursor.options.smoothing
hoverScale	number	1.5	docs:hooks.use-custom-cursor.options.hoverScale
detectLabels	boolean	true	docs:hooks.use-custom-cursor.options.detectLabels

반환값

이름	타입	설명
x	number	docs:hooks.use-custom-cursor.returns.x
y	number	docs:hooks.use-custom-cursor.returns.y
label	string \| null	docs:hooks.use-custom-cursor.returns.label
isHovering	boolean	docs:hooks.use-custom-cursor.returns.isHovering
style	CSSProperties	docs:hooks.use-custom-cursor.returns.style
isVisible	boolean	docs:hooks.use-custom-cursor.returns.isVisible

사용 사례

인터랙티브 UI

제스처 기반 인터랙티브 컴포넌트

useNavigation useWindowSize