React YMD Select Wareki

UIフレームワークに依存しない、和暦対応の年月日セレクトカスタムフック。シンプルで柔軟な実装により、どのUIフレームワークでも利用可能な日本のWebアプリケーションに最適な日付選択ソリューション。

✨ 特徴

• 🔄 UIフレームワーク非依存: 内部ロジックのみを提供し、お好みのUIフレームワーク（shadcn/ui、Chakra UI、Material-UIなど）で実装可能
• ⚡ ロジックとUIの完全分離: UIデザインの自由度を最大限に保ちながら、堅牢な日付処理ロジックを提供
• 🎯 高度な日付バリデーション: 月末日の自動調整や日付の整合性チェックを内蔵
• 🗾 和暦対応: 西暦と和暦の切り替えに対応し、日本のユースケースに最適化
• 💪 型安全: TypeScript完全対応

🚀 インストール

npm install react-ymd-select-wareki
# または
yarn add react-ymd-select-wareki
# または
pnpm add react-ymd-select-wareki

📝 基本的な使い方

import { useReactYmdSelectWareki } from 'react-ymd-select-wareki';

// 基本的な使用例
const DateSelector = () => {
  const [value, setValue] = useState('2024-01-01');
  const [showWareki, setShowWareki] = useState(false);

  const {
    years,
    months,
    days,
    selectedYear,
    selectedMonth,
    selectedDay,
    setSelectedYear,
    setSelectedMonth,
    setSelectedDay,
  } = useReactYmdSelectWareki({
    value,
    onChange: setValue,
    showWareki,
  });

  return (
    <div>
      {/* お好みのUIフレームワークのセレクトコンポーネントを使用 */}
      <select value={selectedYear} onChange={(e) => setSelectedYear(e.target.value)}>
        {years.map((year) => (
          <option key={year.value} value={year.value}>
            {year.wareki ? `${year.label}（${year.wareki}）` : year.label}
          </option>
        ))}
      </select>

      <select value={selectedMonth} onChange={(e) => setSelectedMonth(e.target.value)}>
        {months.map((month) => (
          <option key={month.value} value={month.value}>
            {month.label}
          </option>
        ))}
      </select>

      <select value={selectedDay} onChange={(e) => setSelectedDay(e.target.value)}>
        {days.map((day) => (
          <option key={day.value} value={day.value}>
            {day.label}
          </option>
        ))}
      </select>
    </div>
  );
};

📚 APIリファレンス

useReactYmdSelectWareki

const useReactYmdSelectWareki = (config: ControlledConfig) => {
  // ...
};

type ControlledConfig = {
  value: string;              // YYYY-MM-DD形式の日付文字列
  onChange: (value: string) => void;  // 日付が変更された時のコールバック
  showWareki: boolean;        // 和暦表示の有効/無効
  firstYear?: number;         // 選択可能な最初の年（デフォルト: 1900）
  lastYear?: number;          // 選択可能な最後の年（デフォルト: 現在の年）
};

// 戻り値の型
interface ReturnType {
  years: SelectOptionsYear[];    // 年の選択肢
  months: SelectOptions[];       // 月の選択肢
  days: SelectOptions[];        // 日の選択肢
  selectedYear: string;         // 選択された年
  selectedMonth: string;        // 選択された月
  selectedDay: string;          // 選択された日
  setSelectedYear: (year: string) => void;    // 年を設定する関数
  setSelectedMonth: (month: string) => void;  // 月を設定する関数
  setSelectedDay: (day: string) => void;      // 日を設定する関数
}

🌟 高度な使用例

カスタム年範囲の設定

const DateSelector = () => {
  const {
    years,
    months,
    days,
    // ...他のプロパティ
  } = useReactYmdSelectWareki({
    value,
    onChange: setValue,
    showWareki,
    firstYear: 2000,    // 2000年から
    lastYear: 2030,     // 2030年までを選択可能に
  });
  
  // ... UIの実装
};

🤝 コントリビューション

プロジェクトへのコントリビューションを歓迎します！バグ報告、機能リクエスト、プルリクエストなど、どんな形での貢献でもお待ちしています。

📄 ライセンス

MIT License - 詳細は LICENSE ファイルをご覧ください。