useNavigation

@hua-labs/hua/motion

내비게이션 상태 관리 및 라우팅 헬퍼

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const nav = useNavigation({
  type: "slide",
  slideDirection: "left",
  staggerDelay: 50,
  itemCount: navItems.length,
});

return (
  <>
    <button onClick={nav.toggleMenu}>Menu</button>
    <nav ref={nav.ref} style={nav.style}>
      {navItems.map((item, i) => (
        <a
          key={item.href}
          href={item.href}
          style={nav.itemStyles[i]}
          onClick={() => nav.setActiveItem(i)}
          className={nav.activeIndex === i ? "active" : ""}
        >
          {item.label}
        </a>
      ))}
    </nav>
  </>
);

docs:hooks.use-navigation.examples.fadeNavigationWithActiveState

tsx

const nav = useNavigation({
  type: "fade",
  staggerDelay: 80,
  itemCount: 6,
  activeScale: 1.1,
  duration: 250,
});

return (
  <nav ref={nav.ref} style={nav.style} className="sidebar">
    {links.map((link, i) => (
      <button
        key={link.id}
        style={nav.itemStyles[i]}
        onClick={() => nav.setActiveItem(i)}
        className={nav.activeIndex === i ? "text-primary font-bold" : ""}
      >
        {link.label}
      </button>
    ))}
  </nav>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
type	"slide" \| "fade" \| "scale" \| "rotate" \| "custom"	"slide"	docs:hooks.use-navigation.options.type
duration	number	300	docs:hooks.use-navigation.options.duration
easing	string	"ease-out"	docs:hooks.use-navigation.options.easing
slideDirection	"left" \| "right" \| "up" \| "down"	"left"	docs:hooks.use-navigation.options.slideDirection
staggerDelay	number	50	docs:hooks.use-navigation.options.staggerDelay
itemCount	number	5	docs:hooks.use-navigation.options.itemCount
activeScale	number	1.05	docs:hooks.use-navigation.options.activeScale
hoverScale	number	1.1	docs:hooks.use-navigation.options.hoverScale
autoStart	boolean	false	docs:hooks.use-navigation.options.autoStart

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-navigation.returns.ref
style	CSSProperties	docs:hooks.use-navigation.returns.style
isOpen	boolean	docs:hooks.use-navigation.returns.isOpen
isVisible	boolean	docs:hooks.use-navigation.returns.isVisible
isAnimating	boolean	docs:hooks.use-navigation.returns.isAnimating
activeIndex	number	docs:hooks.use-navigation.returns.activeIndex
itemStyles	CSSProperties[]	docs:hooks.use-navigation.returns.itemStyles
progress	number	docs:hooks.use-navigation.returns.progress
openMenu	() => void	docs:hooks.use-navigation.returns.openMenu
closeMenu	() => void	docs:hooks.use-navigation.returns.closeMenu
toggleMenu	() => void	docs:hooks.use-navigation.returns.toggleMenu
setActiveItem	(index: number) => void	docs:hooks.use-navigation.returns.setActiveItem
goToNext	() => void	docs:hooks.use-navigation.returns.goToNext
goToPrevious	() => void	docs:hooks.use-navigation.returns.goToPrevious

사용 사례

내비게이션 메뉴

메뉴 항목 호버/선택 애니메이션

모바일 메뉴

햄버거 메뉴 열기/닫기

사이드바 내비게이션

사이드바 활성 항목 표시

탭 내비게이션

탭 전환 애니메이션

useVisibilityToggle useWindowSize