UIフレームワーク非依存の年月日セレクトカスタムフック（和暦対応）
npm install react-ymd-select-warekiUIフレームワークに依存しない、和暦対応の年月日セレクトカスタムフック。シンプルで柔軟な実装により、どのUIフレームワークでも利用可能な日本のWebアプリケーションに最適な日付選択ソリューション。
- 🔄 UIフレームワーク非依存: 内部ロジックのみを提供し、お好みのUIフレームワーク（shadcn/ui、Chakra UI、Material-UIなど）で実装可能
- ⚡ ロジックとUIの完全分離: UIデザインの自由度を最大限に保ちながら、堅牢な日付処理ロジックを提供
- 🎯 高度な日付バリデーション: 月末日の自動調整や日付の整合性チェックを内蔵
- 🗾 和暦対応: 西暦と和暦の切り替えに対応し、日本のユースケースに最適化
- 💪 型安全: TypeScript完全対応
``bash`
npm install react-ymd-select-warekiまたは
yarn add react-ymd-select-warekiまたは
pnpm add react-ymd-select-wareki
`tsx
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 (
📚 APIリファレンス
$3
typescript
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; // 日を設定する関数
}
`🌟 高度な使用例
$3
typescript
const DateSelector = () => {
const {
years,
months,
days,
// ...他のプロパティ
} = useReactYmdSelectWareki({
value,
onChange: setValue,
showWareki,
firstYear: 2000, // 2000年から
lastYear: 2030, // 2030年までを選択可能に
});
// ... UIの実装
};
``プロジェクトへのコントリビューションを歓迎します！バグ報告、機能リクエスト、プルリクエストなど、どんな形での貢献でもお待ちしています。
MIT License - 詳細は LICENSE ファイルをご覧ください。