Compoundコンポーネント

styledパッケージは、各ピッカーの内部構造とレンダリングを完全に制御できるCompound Component APIを公開しています。単一のモノリシックなコンポーネントの代わりに、個々のパーツからピッカーを構成します。

仕組み

すべてのピッカー（例：DatePicker）は、シンプルなコンポーネントであると同時に、compoundパーツのネームスペースでもあります。

import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


// シンプルな使用法 — デフォルトのレイアウトをレンダリング
<DatePicker value={value} onChange={setValue} />


// Compound使用法 — 構造を完全に制御
<DatePicker.Root value={value} onChange={setValue}>
  <DatePicker.Trigger />
  <DatePicker.Content>
    <DatePicker.Header>
      <DatePicker.PrevButton />
      <DatePicker.Title />
      <DatePicker.NextButton />
    </DatePicker.Header>
    <DatePicker.Grid />
    <DatePicker.Footer>
      <DatePicker.ClearButton />
      <DatePicker.CancelButton />
      <DatePicker.ConfirmButton />
    </DatePicker.Footer>
  </DatePicker.Content>
</DatePicker.Root>

利用可能なパーツ

DatePicker

パーツ説明
DatePicker.RootProvider + コンテナ。すべてのピッカーのプロップ（value、onChange、minDateなど）を受け入れます。
DatePicker.Triggerポップアップを開閉するボタン。選択された値を表示します。
DatePicker.Contentポップアップコンテナ（Rootにinlineが設定されている場合はインラインコンテナ）
DatePicker.Header月のナビゲーション行
DatePicker.PrevButton前の月に移動します
DatePicker.NextButton次の月に移動します
DatePicker.Title現在の月/年の表示（ドロップダウン選択をサポート）
DatePicker.Grid曜日のヘッダーと日付セルを持つカレンダーグリッド
DatePicker.Day個々の日付セル（Gridのrender prop内で使用）
DatePicker.Footerアクションボタンのコンテナ
DatePicker.ClearButton選択された値をクリアします
DatePicker.CancelButtonキャンセルして閉じます
DatePicker.ConfirmButton選択を確定します
DatePicker.TodayButton今日に移動します

DateRangePicker

上記のすべてのパーツに加えて、以下が含まれます:

パーツ説明
DateRangePicker.Calendarsデュアルカレンダーのコンテナ
DateRangePicker.Presetsプリセット範囲のサイドバーコンテナ
DateRangePicker.PresetItem個々のプリセットボタン

DateTimePicker / DateRangeTimePicker

それぞれのベースパーツに加えて、シンプルなAPIを介したタイムパネルの統合が含まれます。時間対応ピッカーでcompoundパーツを使用すると、タイムパネルは自動的にレンダリングされます。