본문으로 건너뛰기

@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.

번들 크기​

기본 엔트리 산출물은 gzip 기준 약 18.5 KB입니다(컴포넌트 7종, CI 한계 20 KB). Headless ESM/CJS 산출물에는 별도의 22 KB CI 게이트가 적용됩니다 — 이 엔트리는 같은 컴포넌트에 더해 훅 7종 전부와 DateTimePicker.Presets까지 싣기 때문에, 기본 엔트리의 수치를 공유하지 않고 따로 예산을 잡습니다.

이 수치는 의존성을 external 로 둔 산출물 기준입니다. 애플리케이션이 실제로 배포하는 크기는 더 큽니다 — 번들러가 @kalyx/core·@kalyx/adapter-date-fns·@floating-ui/react 까지 해석하기 때문이며, 이 저장소의 소비자 하네스 실측은 약 24 KB gzip 입니다. sideEffects: false를 선언하고 dot-notation export 에 pure 주석이 붙어 있어, import 하지 않은 picker 는 제거됩니다 — TimePicker 하나는 약 16.2 KB, 가장 무거운 picker 는 약 19.9 KB 이고 7종 전부 + 훅은 약 25.0 KB 입니다. picker 들이 큰 기반을 공유하므로 절감은 실제이되 선형과는 거리가 멉니다. 실제 import 조합은 프로덕션 번들에서 직접 측정하시고, 전체 설명은 트러블슈팅 → 번들 크기를 참고하세요.

함께 보기​