@uniai-fe/react-hooks

React 19+ 환경에서 바로 재사용할 수 있는 커스텀 Hook 모음입니다.

설치

pnpm add @uniai-fe/react-hooks

사용 예시

import { useDebounceState } from "@uniai-fe/react-hooks/util";
import { useOpenDropdown } from "@uniai-fe/react-hooks/interaction";

function SearchBox() {
  const [keyword, setKeyword] = useState("");
  const debounced = useDebounceState(keyword, 300);
  const { isOpen, setOpen, ref } = useOpenDropdown();

  useEffect(() => {
    if (debounced) fetchSuggestions(debounced);
  }, [debounced]);

  return (
    <div ref={ref}>
      <input
        value={keyword}
        onFocus={() => setOpen(true)}
        onChange={(e) => setKeyword(e.target.value)}
      />
      {isOpen && <SuggestionList keyword={debounced} />}
    </div>
  );
}

Codex 참고용 카탈로그

각 Hook의 책임과 의존성 관계는 catalog.md에 정리했습니다. 새로운 상태 로직을 만들기 전에 catalog를 먼저 참고해 기존 Hook으로 대체 가능한지 확인하세요.