@react-datepicker/hooks

🗓️ @react-datepicker/hooks is a customizable, headless React calendar hooks library that empowers developers to build powerful and flexible calendar and date-picker components.

🚀 Features

• ✨ Single & Range Selection: Use the hook for both single-date and date-range selection.
• 🎨 Fully Customizable: Complete control over styling to match your app’s unique design.
• ♿ ARIA Support: Accessibility-first design to ensure your datepickers are user-friendly for everyone.
• 🌍 Locale Support: Easily configure for different regions.

---

Installation

npm install @react-datepicker/hooks

Basic Usage

Refer to the Documentation for detailed usage examples and customization options.

import { useCalendar } from "@react-datepicker/ui";

// Controlled - pass value and onChange
const { displayedMonths, register, nextMonth, previousMonth, setYear } =
  useCalendar(
    { numberOfDisplayedMonths: 2 },
    // For controlled usage - pass value and onChange to the hook
    value,
    (date) => onChange(date)
  );

// Uncontrolled - state managed within the hook
const {
  value, // rangeValue for date range when isDateRange is true
  displayedMonths,
  register,
  nextMonth,
  setYear,
} = useCalendar({ numberOfDisplayedMonths: 2 });