본문으로 건너뛰기

@kalyx/react

공개 React API입니다. 아래 이름들은 전부 @kalyx/react에서 바로 import 할 수 있습니다.

import {
  DatePicker, RangePicker, TimePicker, DateTimePicker,
  MonthPicker, YearPicker, WeekPicker,
} from '@kalyx/react';

컴포넌트​

이름문서
DatePicker컴포넌트 문서
RangePicker컴포넌트 문서
TimePicker컴포넌트 문서
DateTimePicker컴포넌트 문서
MonthPicker컴포넌트 문서
YearPicker컴포넌트 문서
WeekPicker컴포넌트 문서

훅​

이름문서
useDatePicker훅 문서
useRangePicker훅 문서
useTimePicker훅 문서

훅 4종은 @kalyx/react/headless 엔트리에만 실립니다. 기본 엔트리의 바이트 예산 밖에 두기 위해서입니다.

이름문서
useMonthPicker훅 문서
useYearPicker훅 문서
useWeekPicker훅 문서
useDateTimePicker훅 문서
import { useMonthPicker } from '@kalyx/react/headless';

어댑터​

DateFnsAdapter는 편의를 위해 @kalyx/react에서 다시 export 합니다(메인 엔트리가 이미 기본으로 주입하는 어댑터입니다).

import { DateFnsAdapter } from '@kalyx/react';

미리 만들어 둔 어댑터 두 종이 별도 패키지로 배포돼 있으며, @kalyx/react/headless 엔트리와 함께 씁니다.

import { DayjsAdapter } from '@kalyx/adapter-dayjs';
import { LuxonAdapter } from '@kalyx/adapter-luxon';

세 어댑터 모두 동일한 DateAdapter 계약을 구현하고, UTC로 동작하며, @kalyx/core/test-helpers로 검증됩니다. 어댑터 가이드를 참고하세요.

타입​

DatePicker 타입​

import type {
  DatePickerRootProps,
  DatePickerInputProps,
  DatePickerTriggerProps,
  DatePickerPopoverProps,
  DatePickerCalendarProps,
  DatePickerCalendarClassNames,
  DatePickerMonthGridProps,
  DatePickerMonthGridClassNames,
  DatePickerYearGridProps,
  DatePickerYearGridClassNames,
  DatePickerPresetsProps,
  DatePickerPresetsClassNames,
  DatePickerPresetProps,
  DatePickerPresetKey,
} from '@kalyx/react';

RangePicker 타입​

import type {
  RangePickerRootProps,
  RangePickerInputProps,
  RangeInputPart,            // 'start' | 'end'
  RangePickerPopoverProps,
  RangePickerCalendarProps,
  RangePickerCalendarClassNames,
  RangePickerPresetsProps,
  RangePickerPresetsClassNames,
  RangePickerPresetProps,
  PresetKey,
} from '@kalyx/react';

TimePicker 타입​

import type {
  TimePickerRootProps,
  TimePickerInputProps,
  TimePickerHourListProps,
  TimePickerHourListClassNames,
  TimePickerMinuteListProps,
  TimePickerMinuteListClassNames,
  TimePickerAmPmToggleProps,
  TimePickerAmPmToggleClassNames,
} from '@kalyx/react';

DateTimePicker 타입​

import type {
  DateTimePickerRootProps,
  DateTimePickerInputProps,
} from '@kalyx/react';

서브 컴포넌트 타입은 DatePicker와 TimePicker에서 다시 export 됩니다.

MonthPicker 타입​

import type {
  MonthPickerRootProps,
  MonthPickerInputProps,
  MonthPickerTriggerProps,
  MonthPickerPopoverProps,
  MonthPickerGridProps,
  MonthPickerGridClassNames,
} from '@kalyx/react';

YearPicker 타입​

import type {
  YearPickerRootProps,
  YearPickerInputProps,
  YearPickerTriggerProps,
  YearPickerPopoverProps,
  YearPickerGridProps,
  YearPickerGridClassNames,
} from '@kalyx/react';

WeekPicker 타입​

import type {
  WeekPickerRootProps,
  WeekPickerInputProps,
  WeekPickerPopoverProps,
  WeekPickerCalendarProps,
  WeekPickerCalendarClassNames,
} from '@kalyx/react';

훅 타입​

import type {
  UseDatePickerOptions,
  UseDatePickerReturn,
  UseRangePickerOptions,
  UseRangePickerReturn,
  UseTimePickerOptions,
  UseTimePickerReturn,
} from '@kalyx/react';

@kalyx/core 재export​

import type {
  ISODateString,
  DateRange,
  DisabledRule,
  DateAdapter,
  CalendarDay,
  TimeValue,
} from '@kalyx/react';

런타임 의존성​

  • @kalyx/core (workspace)
  • @kalyx/adapter-date-fns (workspace. 기본 엔트리를 위해 date-fns를 함께 들고 옵니다)
  • @floating-ui/react ^0.27.0

Peer 의존성: react ^19.0.0, react-dom ^19.0.0.

선택적 어댑터 패키지(/headless 엔트리를 기본이 아닌 백엔드와 함께 쓸 때만 설치): @kalyx/adapter-dayjs, @kalyx/adapter-luxon.

번들 크기​

두 숫자는 서로 다른 것을 잽니다.

배포 파일 한 개의 크기 (pnpm check-bundle, README 배지의 값). packages/react/dist/index.js 한 파일을 gzip 한 크기이고 @kalyx/core·@kalyx/adapter-date-fns·@floating-ui/react 는 외부 import 로 남깁니다. ESM 약 19.5 KB(CJS 19.78 KB)이고 CI 한계는 20 KB 입니다. Headless ESM/CJS 파일(20.79 KB, 21.09 KB)에는 별도의 22 KB CI 게이트가 적용됩니다. 이 엔트리는 같은 컴포넌트에 더해 훅 7종 전부와 DateTimePicker.Presets까지 싣기 때문에, 기본 엔트리의 수치를 공유하지 않고 따로 예산을 잡습니다.

앱에 실제로 실리는 크기 (pnpm check-tree-shaking). 번들러가 위 세 의존성까지 해석하므로 더 큽니다. 스크립트는 esbuild 로 minify 하고 의존성을 함께 묶은 뒤(React, React DOM 은 외부) gzip 합니다. DatePicker 하나 약 19 KB(18.90 KB), 7종 picker + 메인 엔트리 훅 3종 전부 약 26 KB(25.65 KB)입니다. 의존성을 포함한 다른 라이브러리의 크기 수치와 비교할 때는 이 숫자를 씁니다.

sideEffects: false를 선언하고 dot-notation export 에 pure 주석이 붙어 있어, import 하지 않은 picker 는 제거됩니다. TimePicker 하나는 약 16.36 KB, 가장 무거운 picker(DateTimePicker)는 약 20.16 KB 입니다. 전체 시나리오 표는 pnpm check-tree-shaking 으로 확인하세요. picker 들이 큰 기반을 공유하므로 절감은 실제이되 선형과는 거리가 멉니다. 실제 import 조합은 프로덕션 번들에서 직접 측정하시고, 전체 설명은 트러블슈팅 → 번들 크기를 참고하세요.

함께 보기​