@frontend-toolkit-js/hooks

v0.6.0TypeScript

React hooks for better DX with type safety

react hooks calendar date date-picker typescript frontend dx developer-experience

0/weekUpdated 1 months agoMITUnpacked: 269.0 KB

Published by rak517

npm install @frontend-toolkit-js/hooks

Repository Homepage npm

@frontend-toolkit/hooks

타입 안전하고 선언적인 React 훅 라이브러리

![npm version](https://www.npmjs.com/package/@frontend-toolkit/hooks)
![License: MIT](https://opensource.org/licenses/MIT)

설치

``bash npm install @frontend-toolkit-js/hooks

`or`


pnpm add @frontend-toolkit-js/hooks
or

yarn add @frontend-toolkit-js/hooks


특징
- ✅ TypeScript strict mode 100%
- ✅ 제네릭으로 타입 자동 추론
- ✅ Tree-shaking 지원
- ✅ 자동 cleanup (메모리 누수 방지)
Hooks
$3
달력 데이터와 네비게이션을 제공합니다. UI는 완전히 사용자가 제어합니다.

`tsx import { useCalendar } from '@frontend-toolkit/hooks';

function Calendar() { const cal = useCalendar({ weekStartsOn: 1 }); // 월요일 시작

return (


      
      {cal.currentDate.toLocaleDateString('ko-KR')}

      
      

        {cal.days.map((day, i) => (
                      key={i}
            style={{
              opacity: day.isCurrentMonth ? 1 : 0.3,
              fontWeight: day.isToday ? 'bold' : 'normal',
            }}
          >
            {day.day}
          

        ))}


  );
}

옵션: defaultDate, weekStartsOn (0=일요일, 1=월요일)

반환값: days, weekdays, currentDate, prev, next, today, setDate

전체 API 문서 →

`개발 예정`

- useDebounce- 디바운스된 값 반환 -useBoolean- boolean 상태 관리 -useLocalStorage- 타입 안전한 localStorage -useFetch - 선언적 데이터 페칭

`TypeScript`

모든 훅은 TypeScript로 작성되었으며 타입이 자동으로 추론됩니다.

`tsx const cal = useCalendar(); // ^? { days: CalendarDay[], weekdays: Weekday[], ... }``

브라우저 지원

- 모던 브라우저 (ES2020+)
- React 18+

라이선스

MIT © rak517

링크

- 문서
- 이슈
- 변경 이력

or

pnpm add @frontend-toolkit-js/hooks

or

yarn add @frontend-toolkit-js/hooks

특징

- ✅ TypeScript strict mode 100%
- ✅ 제네릭으로 타입 자동 추론
- ✅ Tree-shaking 지원
- ✅ 자동 cleanup (메모리 누수 방지)

Hooks

$3

달력 데이터와 네비게이션을 제공합니다. UI는 완전히 사용자가 제어합니다.

tsx
import { useCalendar } from '@frontend-toolkit/hooks';

function Calendar() {
  const cal = useCalendar({ weekStartsOn: 1 }); // 월요일 시작

  return (


      
      {cal.currentDate.toLocaleDateString('ko-KR')}

      
      

        {cal.days.map((day, i) => (
                      key={i}
            style={{
              opacity: day.isCurrentMonth ? 1 : 0.3,
              fontWeight: day.isToday ? 'bold' : 'normal',
            }}
          >
            {day.day}
          

        ))}