Headless

Pakiet headless (react-date-range-picker-headless) dostarcza niestilizowane hooki i dostawców kontekstu. Zawiera całą logikę zarządzania stanem, kalendarzem, nawigacją za pomocą klawiatury i funkcje dostępności — ale zero CSS i żadnych narzuconych opinii co do znaczników.

Dostarczasz swój własny interfejs użytkownika.

Instalacja

npm install react-date-range-picker-headless

Kiedy używać trybu Headless

  • Posiadasz system projektowy z własną biblioteką komponentów
  • Chcesz mieć idealną co do piksela kontrolę nad każdym elementem
  • Budujesz niestandardowy selektor dat для konkretnego przypadku użycia
  • Chcesz zintegrować się z frameworkiem CSS, który nie jest obsługiwany przez pakiety stylizowane

Jeśli chcesz gotowych do użycia, stylizowanych komponentów, zobacz zamiast tego Styled, Tailwind v4 lub Tailwind v3.

Jak to działa

  1. Wybierz hooka w oparciu o swój przypadek użycia
  2. Przekaż opcje (value, onChange, config)
  3. Otrzymaj z powrotem stan i procedury obsługi
  4. Renderuj swój własny interfejs użytkownika, używając zwróconych wartości
import { useState } from "react";
import { useDatePicker } from "react-date-range-picker-headless";
function MyDatePicker() {
  const [value, setValue] = useState<Date | null>(null);


  const {
    isOpen,
    calendar,
    getDayProps,
    displayValue,
    handleToggle,
    handleDateClick,
    handleConfirm,
    handlePrevMonth,
    handleNextMonth,
    locale,
  } = useDatePicker({ value, onChange: setValue });


  return (
    <div>
      <button onClick={handleToggle}>{displayValue || locale.placeholder}</button>
      {isOpen && (
        <div>
          <div>
            <button onClick={handlePrevMonth}>{locale.prevMonth}</button>
            <span>{locale.formatMonthYear(calendar.month)}</span>
            <button onClick={handleNextMonth}>{locale.nextMonth}</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)" }}>
            {calendar.weeks.flat().map((day, i) => {
              if (!day) return <span key={i} />;
              const props = getDayProps(day);
              return (
                <button
                  key={i}
                  onClick={() => handleDateClick(day)}
                  style={{
                    background: props.isSelected ? "#0ea5e9" : "transparent",
                    color: props.isDisabled ? "#ccc" : props.isToday ? "#0ea5e9" : "inherit",
                  }}
                >
                  {props.day}
                </button>
              );
            })}
          </div>
          <button onClick={handleConfirm}>{locale.confirm}</button>
        </div>
      )}
    </div>
  );
}

Dostępne hooki

| Hook