useRecurringDates

A React hook that wraps generateRecurringDates with useMemo. Recomputes only when the config changes.

Peer Dependency

Requires react ^17.0.0 or ^18.0.0 as a peer dependency.

Signature

function useRecurringDates(config: RecurringDatesConfig): RecurringDatesResult

Behavior

Calls generateRecurringDates inside useMemo.
Returns { text, dates } on success or { text: "", dates: [] } on failure.
Re-computes when the config reference changes.
Safe to use in any React functional component.

Basic Example

Monthly Pay Days

import { useRecurringDates } from "recurring-dates";

function PayDays() {
  const { text, dates } = useRecurringDates({
    STARTS_ON: "2025-01-01",
    ENDS_ON: "2025-12-31",
    FREQUENCY: "M",
    MONTH_DATES: [1, 15],
    FORMAT: "YYYY-MM-DD",
  });

  return (
    <div>
      <h2>{text}</h2>
      <p>{dates.length} pay days this year</p>
      <ul>
        {dates.map((d) => (
          <li key={d}>{d}</li>
        ))}
      </ul>
    </div>
  );
}

With Dynamic Config

Dynamic Config

import { useState } from "react";
import { useRecurringDates } from "recurring-dates";

function ScheduleBuilder() {
  const [frequency, setFrequency] = useState("W");
  const [days, setDays] = useState(["MON", "FRI"]);

  const { text, dates } = useRecurringDates({
    STARTS_ON: "2025-01-01",
    ENDS_ON: "2025-03-31",
    FREQUENCY: frequency,
    WEEK_DAYS: days,
    FORMAT: "YYYY-MM-DD",
  });

  return (
    <div>
      <select
        value={frequency}
        onChange={(e) => setFrequency(e.target.value)}
      >
        <option value="D">Daily</option>
        <option value="W">Weekly</option>
        <option value="M">Monthly</option>
      </select>
      <p>{text}</p>
      <p>{dates.length} dates generated</p>
    </div>
  );
}

Performance Tip

The hook uses useMemo with the config as the dependency. If you create a new config object on every render (e.g. inline object literal), the memo will re-run each time. For best performance, stabilize the config reference with useState or useMemo.