Repository: gpbl/react-day-picker
Pull request #2198 (2024-06-08 13:23:12)

feat: new `startMonth`, `endMonth` prop; deprecate props


Patch:
diff --git a/examples/Dropdown.tsx b/examples/Dropdown.tsx
index 23e55b6de..607e97950 100644
--- a/examples/Dropdown.tsx
+++ b/examples/Dropdown.tsx
@@ -6,8 +6,8 @@ export function Dropdown() {
   return (
     <DayPicker
       captionLayout="dropdown"
-      fromMonth={new Date(2015, 6)}
-      toMonth={new Date(2025, 9)}
+      startMonth={new Date(2015, 6)}
+      endMonth={new Date(2025, 9)}
     />
   );
 }
diff --git a/examples/StartEndMonths.tsx b/examples/StartEndMonths.tsx
new file mode 100644
index 000000000..40c6f6952
--- /dev/null
+++ b/examples/StartEndMonths.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+export function StartEndMonths() {
+  return (
+    <DayPicker
+      defaultMonth={new Date(2024, 0)}
+      startMonth={new Date(2024, 0)}
+      endMonth={new Date(2025, 11)}
+    />
+  );
+}
diff --git a/examples/index.ts b/examples/index.ts
index 085aebc04..c7321b47d 100644
--- a/examples/index.ts
+++ b/examples/index.ts
@@ -49,6 +49,7 @@ export * from "./SingleRequired";
 export * from "./Spanish";
 export * from "./SpanishWeekStartsOn";
 export * from "./Start";
+export * from "./StartEndMonths";
 export * from "./StylingCss";
 export * from "./StylingInline";
 export * from "./StylingModifiers";
diff --git a/src/contexts/calendar.tsx b/src/contexts/calendar.tsx
index 8d94f452c..e668a0a8a 100644
--- a/src/contexts/calendar.tsx
+++ b/src/contexts/calendar.tsx
@@ -112,7 +112,7 @@ export function CalendarProvider(providerProps: { children?: ReactNode }) {
   const lastMonth = displayMonths[displayMonths.length - 1];
 
   /** An array of the dates displayed in the calendar. */
-  const dates = getDates(displayMonths, props.toMonth, props);
+  const dates = getDates(displayMonths, props.endMonth, props);
 
   /** An array of the Months displayed in the calendar. */
   const months = getMonths(displayMonths, dates, props);
@@ -139,13 +139,13 @@ export function CalendarProvider(providerProps: { children?: ReactNode }) {
       return;
     }
     let newMonth = startOfMonth(date);
-    // if month is before fromMonth, use the first month instead
-    if (props.fromMonth && newMonth < startOfMonth(props.fromMonth)) {
-      newMonth = startOfMonth(props.fromMonth);
+    // if month is before startMonth, use the first month instead
+    if (props.startMonth && newMonth < startOfMonth(props.startMonth)) {
+      newMonth = startOfMonth(props.startMonth);
     }
-    // if month is after toMonth, use the last month instead
-    if (props.toMonth && newMonth > startOfMonth(props.toMonth)) {
-      newMonth = startOfMonth(props.toMonth);
+    // if month is after endMonth, use the last month instead
+    if (props.endMonth && newMonth > startOfMonth(props.endMonth)) {
+      newMonth = startOfMonth(props.endMonth);
     }
     setFirstMonth(newMonth);
     props.onMonthChange?.(newMonth);
diff --git a/src/contexts/props.tsx b/src/contexts/props.tsx
index 6c5d45320..93563fa45 100644
--- a/src/contexts/props.tsx
+++ b/src/contexts/props.tsx
@@ -10,6 +10,7 @@ import { getDefaultClassNames } from "../helpers/getDefaultClassNames";
 import { getFormatters } from "../helpers/getFormatters";
 import { getStartEndMonths } from "../helpers/getStartEndMonths";
 import * as defaultLabels from "../labels";
+import { V9DeprecatedProps } from "../types";
 import type {
   ClassNames,
   DataAttributes,
@@ -35,12 +36,12 @@ import type {
 export interface PropsContext<
   T extends Mode = "default",
   R extends boolean = false
-> extends PropsBase {
+> extends Omit<PropsBase, V9DeprecatedProps> {
   classNames: ClassNames;
   /** The `data-*` attributes passed to `<DayPicker />`. */
   dataAttributes: DataAttributes;
+  endMonth: Date | undefined;
   formatters: Formatters;
-  fromMonth: Date | undefined;
   id: string;
   labels: Labels;
   max: number | undefined;
@@ -48,7 +49,7 @@ export interface PropsContext<
   mode: T;
   numberOfMonths: number;
   required: boolean;
-  toMonth: Date | undefined;
+  startMonth: Date | undefined;
   today: Date;
   /** The currently selected value. */
   selected: Selected<Mode, R> | undefined;
@@ -66,29 +67,38 @@ const propsContext = createContext<PropsContext<Mode, boolean> | null>(null);
  *
  * @private
  */
-export const PropsProvider = <T extends Mode, R extends boolean>(
+export function PropsProvider<T extends Mode, R extends boolean>(
   props: PropsWithChildren<DayPickerProps<T, R>>
-) => {
+) {
   const reactId = useId();
-  const { children, ...restProps } = props;
-
-  const { fromMonth, toMonth } = getStartEndMonths(props);
+  const { startMonth, endMonth } = getStartEndMonths(props);
+  const {
+    children,
+    // Remove deprecated props
+    fromDate,
+    fromMonth,
+    fromYear,
+    toDate,
+    toMonth,
+    toYear,
+    ...restProps
+  } = props;
 
   const context = {
     ...restProps,
     classNames: { ...getDefaultClassNames(), ...restProps.classNames },
     dataAttributes: getDataAttributes(props),
+    endMonth,
     formatters: getFormatters(props.formatters),
-    fromMonth,
     id: props.id ?? reactId,
     labels: { ...defaultLabels, ...restProps.labels },
-    required: "required" in props ? props.required ?? false : false,
-    min: "min" in props ? props.min ?? undefined : undefined,
     max: "max" in props ? props.max ?? undefined : undefined,
+    min: "min" in props ? props.min ?? undefined : undefined,
     mode: props.mode ?? ("default" as Mode),
     numberOfMonths: props.numberOfMonths ?? 1,
+    required: "required" in props ? props.required ?? false : false,
+    startMonth,
     today: props.today ?? new Date(),
-    toMonth,
     selected: "selected" in props ? props.selected : undefined,
     defaultSelected:
       "defaultSelected" in props ? props.defaultSelected : undefined,
@@ -98,7 +108,7 @@ export const PropsProvider = <T extends Mode, R extends boolean>(
   return (
     <propsContext.Provider value={context}>{children}</propsContext.Provider>
   );
-};
+}
 
 /**
  * Access to the props passed to DayPicker.
diff --git a/src/helpers/getDropdownMonths.ts b/src/helpers/getDropdownMonths.ts
index 2e5d07291..e2bb1e0ca 100644
--- a/src/helpers/getDropdownMonths.ts
+++ b/src/helpers/getDropdownMonths.ts
@@ -11,16 +11,16 @@ import { Formatters, Mode } from "../types";
 export function getDropdownMonths(
   props: Pick<
     PropsContext<Mode, boolean>,
-    "fromMonth" | "toMonth" | "locale"
+    "startMonth" | "endMonth" | "locale"
   > & {
     formatters: Pick<Formatters, "formatMonthDropdown">;
   },
   year?: number | undefined
 ): DropdownOption[] | undefined {
-  if (!props.fromMonth) return undefined;
-  if (!props.toMonth) return undefined;
-  const navStartMonth = startOfMonth(props.fromMonth);
-  const navEndMonth = startOfMonth(props.toMonth);
+  if (!props.startMonth) return undefined;
+  if (!props.endMonth) return undefined;
+  const navStartMonth = startOfMonth(props.startMonth);
+  const navEndMonth = startOfMonth(props.endMonth);
 
   const months: number[] = [];
   let month = navStartMonth;
@@ -38,11 +38,11 @@ export function getDropdownMonths(
     );
     const disabled =
       (year &&
-        props.fromMonth &&
-        new Date(year, value) < startOfMonth(props.fromMonth)) ||
+        props.startMonth &&
+        new Date(year, value) < startOfMonth(props.startMonth)) ||
       (year &&
-        props.toMonth &&
-        new Date(year, value) > startOfMonth(props.toMonth)) ||
+        props.endMonth &&
+        new Date(year, value) > startOfMonth(props.endMonth)) ||
       false;
     return { value, label, disabled };
   });
diff --git a/src/helpers/getDropdownYears.ts b/src/helpers/getDropdownYears.ts
index fc61cb0a3..ddf086301 100644
--- a/src/helpers/getDropdownYears.ts
+++ b/src/helpers/getDropdownYears.ts
@@ -11,15 +11,15 @@ import type { Formatters, Mode } from "../types";
 
 /** Return the years to show in the dropdown. */
 export function getDropdownYears(
-  props: Pick<PropsContext<Mode>, "fromMonth" | "toMonth"> & {
+  props: Pick<PropsContext<Mode>, "startMonth" | "endMonth"> & {
     formatters: Pick<Formatters, "formatYearDropdown">;
   },
   month?: number | undefined
 ): DropdownOption[] | undefined {
-  if (!props.fromMonth) return undefined;
-  if (!props.toMonth) return undefined;
-  const firstNavYear = startOfYear(props.fromMonth);
-  const lastNavYear = endOfYear(props.toMonth);
+  if (!props.startMonth) return undefined;
+  if (!props.endMonth) return undefined;
+  const firstNavYear = startOfYear(props.startMonth);
+  const lastNavYear = endOfYear(props.endMonth);
   const years: number[] = [];
   let year = firstNavYear;
   while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
@@ -29,11 +29,11 @@ export function getDropdownYears(
   return years.map((value) => {
     const disabled =
       (month &&
-        props.fromMonth &&
-        new Date(value, month) < startOfMonth(props.fromMonth)) ||
+        props.startMonth &&
+        new Date(value, month) < startOfMonth(props.startMonth)) ||
       (month &&
-        props.toMonth &&
-        new Date(value, month) > startOfMonth(props.toMonth)) ||
+        props.endMonth &&
+        new Date(value, month) > startOfMonth(props.endMonth)) ||
       false;
     const label = props.formatters.formatYearDropdown(value);
     return {
diff --git a/src/helpers/getNextFocus.tsx b/src/helpers/getNextFocus.tsx
index 12deb89a0..ce98e72f2 100644
--- a/src/helpers/getNextFocus.tsx
+++ b/src/helpers/getNextFocus.tsx
@@ -10,7 +10,12 @@ import { getPossibleFocusDate } from "./getPossibleFocusDate";
 
 export type Options = Pick<
   PropsContext<Mode, boolean>,
-  "modifiers" | "locale" | "ISOWeek" | "weekStartsOn" | "fromMonth" | "toMonth"
+  | "modifiers"
+  | "locale"
+  | "ISOWeek"
+  | "weekStartsOn"
+  | "startMonth"
+  | "endMonth"
 >;
 
 export function getNextFocus(
@@ -26,8 +31,8 @@ export function getNextFocus(
     | "locale"
     | "ISOWeek"
     | "weekStartsOn"
-    | "fromMonth"
-    | "toMonth"
+    | "startMonth"
+    | "endMonth"
   >,
   attempt: number = 0
 ): CalendarDay | undefined {
diff --git a/src/helpers/getNextMonth.ts b/src/helpers/getNextMonth.ts
index 26360f966..0dc000996 100644
--- a/src/helpers/getNextMonth.ts
+++ b/src/helpers/getNextMonth.ts
@@ -8,15 +8,15 @@ import { startOfMonth } from "date-fns/startOfMonth";
  *
  * Please note that the next month is not always the next calendar month:
  *
- * - If after the `toMonth` range, is `undefined`;
+ * - If after the `endMonth` range, is `undefined`;
  * - If the navigation is paged , is the number of months displayed ahead.
  */
 export function getNextMonth(
   firstMonth: Date,
   options: {
     numberOfMonths?: number;
-    fromMonth?: Date;
-    toMonth?: Date;
+    startMonth: Date | undefined;
+    endMonth: Date | undefined;
     pagedNavigation?: boolean;
     today?: Date;
     disableNavigation?: boolean;
@@ -25,15 +25,15 @@ export function getNextMonth(
   if (options.disableNavigation) {
     return undefined;
   }
-  const { toMonth, pagedNavigation, numberOfMonths = 1 } = options;
+  const { endMonth, pagedNavigation, numberOfMonths = 1 } = options;
   const offset = pagedNavigation ? numberOfMonths : 1;
   const month = startOfMonth(firstMonth);
 
-  if (!toMonth) {
+  if (!endMonth) {
     return addMonths(month, offset);
   }
 
-  const monthsDiff = differenceInCalendarMonths(toMonth, firstMonth);
+  const monthsDiff = differenceInCalendarMonths(endMonth, firstMonth);
 
   if (monthsDiff < numberOfMonths) {
     return undefined;
diff --git a/src/helpers/getPossibleFocusDate.ts b/src/helpers/getPossibleFocusDate.ts
index d0e687da3..f57e6d5ee 100644
--- a/src/helpers/getPossibleFocusDate.ts
+++ b/src/helpers/getPossibleFocusDate.ts
@@ -19,11 +19,11 @@ export function getPossibleFocusDate(
   moveDir: MoveFocusDir,
   focusedDate: Date,
   options: Pick<
-    PropsContext<Mode, boolean>,
-    "locale" | "ISOWeek" | "weekStartsOn" | "fromMonth" | "toMonth"
+    PropsContext,
+    "locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth"
   >
 ): Date {
-  const { weekStartsOn, fromMonth, toMonth, locale, ISOWeek } = options;
+  const { weekStartsOn, startMonth, endMonth, locale, ISOWeek } = options;
 
   const moveFns = {
     day: addDays,
@@ -42,10 +42,10 @@ export function getPossibleFocusDate(
     focusedDate,
     moveDir === "after" ? 1 : -1
   );
-  if (moveDir === "before" && fromMonth) {
-    nextFocusedDate = max([fromMonth, nextFocusedDate]);
-  } else if (moveDir === "after" && toMonth) {
-    nextFocusedDate = min([toMonth, nextFocusedDate]);
+  if (moveDir === "before" && startMonth) {
+    nextFocusedDate = max([startMonth, nextFocusedDate]);
+  } else if (moveDir === "after" && endMonth) {
+    nextFocusedDate = min([endMonth, nextFocusedDate]);
   }
   return nextFocusedDate;
 }
diff --git a/src/helpers/getPreviousMonth.ts b/src/helpers/getPreviousMonth.ts
index 94963ae37..836b69275 100644
--- a/src/helpers/getPreviousMonth.ts
+++ b/src/helpers/getPreviousMonth.ts
@@ -9,15 +9,15 @@ import { startOfMonth } from "date-fns/startOfMonth";
  * Please note that the previous month is not always the previous calendar
  * month:
  *
- * - If before the `fromMonth` date, is `undefined`;
+ * - If before the `startMonth` date, is `undefined`;
  * - If the navigation is paged, is the number of months displayed before.
  */
 export function getPreviousMonth(
-  startingMonth: Date,
+  firstDisplayedMonth: Date,
   options: {
     numberOfMonths?: number;
-    fromMonth?: Date;
-    toMonth?: Date;
+    startMonth: Date | undefined;
+    endMonth: Date | undefined;
     pagedNavigation?: boolean;
     today?: Date;
     disableNavigation?: boolean;
@@ -26,13 +26,13 @@ export function getPreviousMonth(
   if (options.disableNavigation) {
     return undefined;
   }
-  const { fromMonth, pagedNavigation, numberOfMonths = 1 } = options;
+  const { startMonth, pagedNavigation, numberOfMonths = 1 } = options;
   const offset = pagedNavigation ? numberOfMonths : 1;
-  const month = startOfMonth(startingMonth);
-  if (!fromMonth) {
+  const month = startOfMonth(firstDisplayedMonth);
+  if (!startMonth) {
     return addMonths(month, -offset);
   }
-  const monthsDiff = differenceInCalendarMonths(month, fromMonth);
+  const monthsDiff = differenceInCalendarMonths(month, startMonth);
 
   if (monthsDiff <= 0) {
     return undefined;
diff --git a/src/helpers/getStartEndMonths.ts b/src/helpers/getStartEndMonths.ts
index ca4d828e9..264ee133c 100644
--- a/src/helpers/getStartEndMonths.ts
+++ b/src/helpers/getStartEndMonths.ts
@@ -14,28 +14,51 @@ import type { DayPickerProps, Mode } from "../types";
 export function getStartEndMonths(
   props: Pick<
     DayPickerProps<Mode, boolean>,
-    "fromYear" | "toYear" | "fromMonth" | "toMonth" | "today" | "captionLayout"
+    | "startMonth"
+    | "endMonth"
+    | "today"
+    | "captionLayout"
+    // Deprecated:
+    | "fromYear"
+    | "toYear"
+    | "fromMonth"
+    | "toMonth"
   >
-): Pick<DayPickerProps<Mode, boolean>, "fromMonth" | "toMonth"> {
-  const { fromYear, toYear } = props;
-  let { fromMonth, toMonth } = props;
+): Pick<DayPickerProps<Mode, boolean>, "startMonth" | "endMonth"> {
+  let { startMonth, endMonth } = props;
+
+  // Handle deprecated code
+  const { fromYear, toYear, fromMonth, toMonth } = props;
+  if (!startMonth && fromMonth) {
+    startMonth = fromMonth;
+  }
+  if (!startMonth && fromYear) {
+    startMonth = new Date(fromYear, 0, 1);
+  }
+  if (!endMonth && toMonth) {
+    endMonth = toMonth;
+  }
+  if (!endMonth && toYear) {
+    endMonth = new Date(toYear, 11, 31);
+  }
+
   const hasDropdowns = props.captionLayout?.startsWith("dropdown");
-  if (fromMonth) {
-    fromMonth = startOfMonth(fromMonth);
+  if (startMonth) {
+    startMonth = startOfMonth(startMonth);
   } else if (fromYear) {
-    fromMonth = new Date(fromYear, 0, 1);
-  } else if (!fromMonth && hasDropdowns) {
-    fromMonth = startOfYear(addYears(props.today ?? new Date(), -100));
+    startMonth = new Date(fromYear, 0, 1);
+  } else if (!startMonth && hasDropdowns) {
+    startMonth = startOfYear(addYears(props.today ?? new Date(), -100));
   }
-  if (toMonth) {
-    toMonth = endOfMonth(toMonth);
+  if (endMonth) {
+    endMonth = endOfMonth(endMonth);
   } else if (toYear) {
-    toMonth = new Date(toYear, 11, 31);
-  } else if (!toMonth && hasDropdowns) {
-    toMonth = endOfYear(props.today ?? new Date());
+    endMonth = new Date(toYear, 11, 31);
+  } else if (!endMonth && hasDropdowns) {
+    endMonth = endOfYear(props.today ?? new Date());
   }
   return {
-    fromMonth: fromMonth ? startOfDay(fromMonth) : undefined,
-    toMonth: toMonth ? startOfDay(toMonth) : undefined
+    startMonth: startMonth ? startOfDay(startMonth) : startMonth,
+    endMonth: endMonth ? startOfDay(endMonth) : endMonth
   };
 }
diff --git a/src/helpers/getStartMonth.ts b/src/helpers/getStartMonth.ts
index 3cffd588b..a2c14e994 100644
--- a/src/helpers/getStartMonth.ts
+++ b/src/helpers/getStartMonth.ts
@@ -4,8 +4,6 @@ import { startOfMonth } from "date-fns/startOfMonth";
 
 import { PropsBase } from "../types";
 
-import { getStartEndMonths } from "./getStartEndMonths";
-
 /** Return the start month based on the props passed to DayPicker. */
 
 export function getStartMonth(
@@ -14,8 +12,8 @@ export function getStartMonth(
       PropsBase,
       | "fromYear"
       | "toYear"
-      | "fromMonth"
-      | "toMonth"
+      | "startMonth"
+      | "endMonth"
       | "month"
       | "defaultMonth"
       | "today"
@@ -23,18 +21,24 @@ export function getStartMonth(
     >
   >
 ): Date {
-  const { month, defaultMonth, today, numberOfMonths = 1 } = props;
+  const {
+    month,
+    defaultMonth,
+    today,
+    numberOfMonths = 1,
+    endMonth,
+    startMonth
+  } = props;
   let initialMonth = month || defaultMonth || today || new Date();
-  const { fromMonth, toMonth } = getStartEndMonths(props);
 
   // Fix the initialMonth if is after the to-date
-  if (toMonth && differenceInCalendarMonths(toMonth, initialMonth) < 0) {
+  if (endMonth && differenceInCalendarMonths(endMonth, initialMonth) < 0) {
     const offset = -1 * (numberOfMonths - 1);
-    initialMonth = addMonths(toMonth, offset);
+    initialMonth = addMonths(endMonth, offset);
   }
   // Fix the initialMonth if is before the from-date
-  if (fromMonth && differenceInCalendarMonths(initialMonth, fromMonth) < 0) {
-    initialMonth = fromMonth;
+  if (startMonth && differenceInCalendarMonths(initialMonth, startMonth) < 0) {
+    initialMonth = startMonth;
   }
   return startOfMonth(initialMonth);
 }
diff --git a/src/types.ts b/src/types.ts
index 54f37ce64..b521bedcd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -44,7 +44,7 @@ import {
 /**
  * The props for the {@link DayPicker} component.
  *
- * @template T - The {@link Mode | selection mode}. Defaults to `"default"`.
+ * @template T - The selection mode. Defaults to `"default"`.
  * @template R - Whether the selection is required. Defaults to `false`.
  * @group Props
  */
@@ -129,14 +129,53 @@ export interface PropsBase {
    * @defaultValue 1
    */
   numberOfMonths?: number;
-  /** The earliest month to start the month navigation. */
-  fromMonth?: Date;
-  /** The latest month to end the month navigation. */
+  /**
+   * The earliest month to start the month navigation.
+   *
+   * @since 9.0.0
+   */
+  startMonth?: Date | undefined;
+  /**
+   * @private
+   * @deprecated This prop has been removed. Use `hidden={{ before: date }}`
+   *   instead.
+   */
+  fromDate?: Date | undefined;
+  /**
+   * @private
+   * @deprecated This prop has been renamed to `startMonth`.
+   */
+  fromMonth?: Date | undefined;
+  /**
+   * @private
+   * @deprecated Use `startMonth` instead. E.g. `startMonth={new Date(year,
+   *   0)}`.
+   */
+  fromYear?: number | undefined;
+
+  /**
+   * The latest month to end the month navigation.
+   *
+   * @since 9.0.0
+   */
+  endMonth?: Date;
+  /**
+   * @private
+   * @deprecated This prop has been removed. Use `hidden={{ after: date }}`
+   *   instead.
+   */
+  toDate?: Date;
+  /**
+   * @private
+   * @deprecated This prop has been renamed to `endMonth`.
+   */
   toMonth?: Date;
-  /** The earliest year to start the month navigation. */
-  fromYear?: number;
-  /** The latest year to end the month navigation. */
+  /**
+   * @private
+   * @deprecated Use `endMonth` instead. E.g. `endMonth={new Date(year, 0)}`.
+   */
   toYear?: number;
+
   /** Paginate the month navigation displaying the `numberOfMonths` at time. */
   pagedNavigation?: boolean;
   /**
@@ -636,3 +675,25 @@ export type ModifiersStyles = Record<string, CSSProperties> &
 /** The classnames to assign to each day element matching a modifier. */
 export type ModifiersClassNames = Record<string, string> &
   Partial<Record<InternalModifier, string>>;
+
+export type test = DayPickerProps;
+
+/**
+ * The props that have been deprecated since version 9.0.0.
+ *
+ * @since 9.0.0
+ * @see https://react-day-picker.js.org/next/upgrading
+ */
+export type V9DeprecatedProps =
+  /** Use `hidden` prop instead. */
+  | "fromDate"
+  /** Use `hidden` prop instead. */
+  | "toDate"
+  /** Use `startMonth` instead. */
+  | "fromMonth"
+  /** Use `endMonth` instead. */
+  | "toMonth"
+  /** Use `startMonth` instead. */
+  | "fromYear"
+  /** Use `endMonth` instead. */
+  | "toYear";
diff --git a/website/docs/upgrading.mdx b/website/docs/upgrading.mdx
index ae63fa920..c8aa835c3 100644
--- a/website/docs/upgrading.mdx
+++ b/website/docs/upgrading.mdx
@@ -47,6 +47,16 @@ The formatters now return a string instead of a ReactNode. If you were using the
 + const MyComponent = () => <DayPicker formatters={{ caption: () => 'My caption' }} />;
 ```
 
+
+#### 4. DayPicker
+
+```diff
+- import { DayPickerProps } from 'react-day-picker';
++ import { DayPickerProps, Mode } from 'react-day-picker';
+- const props: DayPickerProps;
++ const props: DayPickerProps<Mode, boolan>;
+```
+
 #### 4. Rename deprecated typings
 
 Many typings have been deprecated in favor of clarity and shorter names. If you were using the typings, you may need to update your code or it will break in the next major version.
@@ -56,14 +66,6 @@ Many typings have been deprecated in favor of clarity and shorter names. If you
 + import { PropsDefault } from 'react-day-picker/types';
 ```
 
-##### DayPickerProps requires the Mode argument
-
-```diff
-- import { DayPickerProps } from 'react-day-picker';
-+ import { DayPickerProps, Mode } from 'react-day-picker';
-- const props: DayPickerProps<Mode>;       // pass the `Mode` argument
-+ const props: DayPickerProps<Mode>;
-```
 
 ---
 
diff --git a/website/docs/using-daypicker/customization.mdx b/website/docs/using-daypicker/customization.mdx
index 8a30f4ce8..c48d9027a 100644
--- a/website/docs/using-daypicker/customization.mdx
+++ b/website/docs/using-daypicker/customization.mdx
@@ -38,8 +38,8 @@ To enable a navigation dropdown, assign `captionLayout="dropdown"`. Utilize `fro
 ```tsx
 <DayPicker
   captionLayout="dropdown"
-  fromMonth={new Date(2015, 6)}
-  toMonth={new Date(2025, 9)}
+  startMonth={new Date(2015, 6)}
+  endMonth={new Date(2025, 9)}
 />
 ```
 
diff --git a/website/docs/using-daypicker/navigation.mdx b/website/docs/using-daypicker/navigation.mdx
index f45eefb64..1ffe88363 100644
--- a/website/docs/using-daypicker/navigation.mdx
+++ b/website/docs/using-daypicker/navigation.mdx
@@ -62,23 +62,19 @@ export function Controlled() {
 
 ## Start and End Dates
 
-Limit the dates the user can navigate to by using the `from*`, `to*` props.
+Limit the dates the user can navigate to by using the `startMonth` and `endMonth` props.
 
-| Prop Name   | Type     | Description                                 |
-| ----------- | -------- | ------------------------------------------- |
-| `fromYear`  | `number` | The earliest year to start the navigation.  |
-| `toYear`    | `number` | The latest year to start the navigation.    |
-| `fromMonth` | `Date`   | The earliest month to start the navigation. |
-| `toMonth`   | `Date`   | The latest month to end the navigation.     |
-| `fromDate`  | `Date`   | The earliest day to start the navigation.   |
-| `toDate`    | `Date`   | The latest day to end the navigation.       |
+| Prop Name    | Type   | Description                                 |
+| ------------ | ------ | ------------------------------------------- |
+| `startMonth` | `Date` | The earliest month to start the navigation. |
+| `endMonth`   | `Date` | The latest month to end the navigation.     |
 
 ```tsx
-<DayPicker defaultMonth={new Date(2024, 0)} fromYear={2024} toYear={2026} />
+<DayPicker startMonth={new Date(2024, 0)} endMonth={new Date(2025, 11)} />
 ```
 
 <BrowserWindow>
-  <Examples.FromToYear />
+  <Examples.StartEndMonths />
 </BrowserWindow>
 
 ## Disabling the Navigation


Test patch:
diff --git a/src/helpers/getDropdownMonths.test.ts b/src/helpers/getDropdownMonths.test.ts
index 43ff50f4b..aa0a1a1f1 100644
--- a/src/helpers/getDropdownMonths.test.ts
+++ b/src/helpers/getDropdownMonths.test.ts
@@ -2,31 +2,31 @@ import * as formatters from "../formatters";
 
 import { getDropdownMonths } from "./getDropdownMonths";
 
-test("returns undefined if `fromMonth` is not defined", () => {
+test("returns undefined if `startMonth` is not defined", () => {
   const result = getDropdownMonths({
-    fromMonth: undefined,
-    toMonth: new Date(),
+    startMonth: undefined,
+    endMonth: new Date(),
     formatters
   });
   expect(result).toBeUndefined();
 });
 
-test("returns undefined if `toMonth` is not defined", () => {
+test("returns undefined if `endMonth` is not defined", () => {
   const result = getDropdownMonths({
-    fromMonth: new Date(),
-    toMonth: undefined,
+    startMonth: new Date(),
+    endMonth: undefined,
     formatters
   });
   expect(result).toBeUndefined();
 });
 
-test("returns sorted months between `fromMonth` and `toMonth`", () => {
-  const fromMonth = new Date(2023, 0, 1);
-  const toMonth = new Date(2023, 11, 31);
+test("returns sorted months between `startMonth` and `endMonth`", () => {
+  const startMonth = new Date(2023, 0, 1);
+  const endMonth = new Date(2023, 11, 31);
 
   const result = getDropdownMonths(
-    { fromMonth, toMonth, formatters },
-    fromMonth.getFullYear()
+    { startMonth, endMonth, formatters },
+    startMonth.getFullYear()
   );
 
   expect(result).toBeDefined();
@@ -38,11 +38,11 @@ test("returns sorted months between `fromMonth` and `toMonth`", () => {
 });
 
 test("formats month labels correctly", () => {
-  const fromMonth = new Date(2023, 3, 1);
-  const toMonth = new Date(2023, 11, 31);
+  const startMonth = new Date(2023, 3, 1);
+  const endMonth = new Date(2023, 11, 31);
   const result = getDropdownMonths(
-    { fromMonth, toMonth, formatters },
-    fromMonth.getFullYear()
+    { startMonth, endMonth, formatters },
+    startMonth.getFullYear()
   );
   if (!result) throw new Error("Unexpected undefined result");
   expect(result[0]).toEqual({ disabled: false, label: "April", value: 3 });
@@ -51,17 +51,17 @@ test("formats month labels correctly", () => {
 
 describe("when using a custom formatter", () => {
   test("formats month labels correctly", () => {
-    const fromMonth = new Date(2023, 0, 1);
-    const toMonth = new Date(2023, 11, 31);
+    const startMonth = new Date(2023, 0, 1);
+    const endMonth = new Date(2023, 11, 31);
     const result = getDropdownMonths(
       {
-        fromMonth,
-        toMonth,
+        startMonth,
+        endMonth,
         formatters: {
           formatMonthDropdown: (month) => `Month ${month.toString()}`
         }
       },
-      fromMonth.getFullYear()
+      startMonth.getFullYear()
     );
     if (!result) throw new Error("Unexpected undefined result");
     expect(result[0]).toEqual({ disabled: false, label: "Month 0", value: 0 });
diff --git a/src/helpers/getDropdownYears.test.ts b/src/helpers/getDropdownYears.test.ts
index 7acbc3ff9..459d6a2dd 100644
--- a/src/helpers/getDropdownYears.test.ts
+++ b/src/helpers/getDropdownYears.test.ts
@@ -2,30 +2,30 @@ import { formatYearDropdown } from "../formatters";
 
 import { getDropdownYears } from "./getDropdownYears";
 
-it("returns undefined if fromMonth is not defined", () => {
+it("returns undefined if startMonth is not defined", () => {
   const result = getDropdownYears({
-    toMonth: new Date(),
-    fromMonth: undefined,
+    endMonth: new Date(),
+    startMonth: undefined,
     formatters: { formatYearDropdown }
   });
   expect(result).toBeUndefined();
 });
 
-it("returns undefined if `toMonth` is not defined", () => {
+it("returns undefined if `endMonth` is not defined", () => {
   const result = getDropdownYears({
-    fromMonth: new Date(),
-    toMonth: undefined,
+    startMonth: new Date(),
+    endMonth: undefined,
     formatters: { formatYearDropdown }
   });
   expect(result).toBeUndefined();
 });
 
-it("returns an array of years between `fromMonth` and `toMonth`", () => {
-  const fromMonth = new Date(2020, 0, 1);
-  const toMonth = new Date(2022, 11, 31);
+it("returns an array of years between `startMonth` and `endMonth`", () => {
+  const startMonth = new Date(2020, 0, 1);
+  const endMonth = new Date(2022, 11, 31);
   const result = getDropdownYears({
-    fromMonth,
-    toMonth,
+    startMonth,
+    endMonth,
     formatters: {
       formatYearDropdown: (year: number): string =>
         `Formatted ${year.toString()}`
@@ -51,11 +51,11 @@ it("returns an array of years between `fromMonth` and `toMonth`", () => {
   ]);
 });
 
-it("handles same year for fromMonth and toMonth", () => {
+it("handles same year for startMonth and endMonth", () => {
   const year = new Date(2021, 5, 15);
   const result = getDropdownYears({
-    fromMonth: year,
-    toMonth: year,
+    startMonth: year,
+    endMonth: year,
     formatters: {
       formatYearDropdown: (year: number): string =>
         `Formatted ${year.toString()}`
diff --git a/src/helpers/getNextFocus.test.tsx b/src/helpers/getNextFocus.test.tsx
index 594364be6..4207d8d22 100644
--- a/src/helpers/getNextFocus.test.tsx
+++ b/src/helpers/getNextFocus.test.tsx
@@ -7,14 +7,14 @@ import type { Mode } from "../types";
 
 import { getNextFocus } from "./getNextFocus";
 
-const defaultDayPicker: Pick<
+const props: Pick<
   PropsContext<Mode, boolean>,
-  "disabled" | "hidden" | "fromMonth" | "toMonth"
+  "disabled" | "hidden" | "startMonth" | "endMonth"
 > = {
   disabled: [],
   hidden: [],
-  fromMonth: undefined,
-  toMonth: undefined
+  startMonth: undefined,
+  endMonth: undefined
 };
 
 it("should return `undefined` if `attempt` exceeds 365", () => {
@@ -24,13 +24,7 @@ it("should return `undefined` if `attempt` exceeds 365", () => {
   );
   const moveBy: MoveFocusBy = "day";
   const moveDir: MoveFocusDir = "after";
-  const result = getNextFocus(
-    moveBy,
-    moveDir,
-    focusedDay,
-    defaultDayPicker,
-    366
-  );
+  const result = getNextFocus(moveBy, moveDir, focusedDay, props, 366);
   expect(result).toBeUndefined();
 });
 
@@ -40,7 +34,7 @@ it("should return the focus date if it is not disabled or hidden", () => {
     new Date(2020, 0, 1)
   );
   const expectedDate = new Date(2020, 0, 2);
-  const result = getNextFocus("day", "after", focusedDay, defaultDayPicker);
+  const result = getNextFocus("day", "after", focusedDay, props);
   expect(result?.date).toEqual(expectedDate);
 });
 
@@ -52,7 +46,7 @@ it("should return the next focus date if it is disabled", () => {
   const disabledDate = new Date(2020, 0, 2);
   const expectedDate = new Date(2020, 0, 3);
   const result = getNextFocus("day", "after", focusedDay, {
-    ...defaultDayPicker,
+    ...props,
     disabled: [disabledDate]
   });
   expect(result?.date).toEqual(expectedDate);
@@ -66,7 +60,7 @@ it("should return the next focus date if it is hidden", () => {
   const hiddenDate = new Date(2020, 0, 2);
   const expectedDate = new Date(2020, 0, 3);
   const result = getNextFocus("day", "after", focusedDay, {
-    ...defaultDayPicker,
+    ...props,
     hidden: [hiddenDate]
   });
   expect(result?.date).toEqual(expectedDate);
diff --git a/src/helpers/getNextMonth.test.ts b/src/helpers/getNextMonth.test.ts
index 1a785f8c3..dc18c9d76 100644
--- a/src/helpers/getNextMonth.test.ts
+++ b/src/helpers/getNextMonth.test.ts
@@ -8,22 +8,32 @@ describe("when number of months is 1", () => {
   describe("when the navigation is disabled", () => {
     const disableNavigation = true;
     it("the next month is undefined", () => {
-      const result = getNextMonth(startingMonth, { disableNavigation });
+      const result = getNextMonth(startingMonth, {
+        disableNavigation,
+        endMonth: undefined,
+        startMonth: undefined
+      });
       expect(result).toBe(undefined);
     });
   });
   describe("when in the navigable range", () => {
-    const toMonth = addMonths(startingMonth, 3);
+    const endMonth = addMonths(startingMonth, 3);
     it("the next month is not undefined", () => {
-      const result = getNextMonth(startingMonth, { toMonth });
+      const result = getNextMonth(startingMonth, {
+        endMonth,
+        startMonth: undefined
+      });
       const expectedNextMonth = addMonths(startingMonth, 1);
       expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
     });
   });
   describe("when not in the navigable range", () => {
-    const toMonth = startingMonth;
+    const endMonth = startingMonth;
     it("the next month is undefined", () => {
-      const result = getNextMonth(startingMonth, { toMonth });
+      const result = getNextMonth(startingMonth, {
+        endMonth,
+        startMonth: undefined
+      });
       expect(result).toBe(undefined);
     });
   });
@@ -35,7 +45,9 @@ describe("when displaying 3 months", () => {
     it("the next month is 3 months ahead", () => {
       const result = getNextMonth(startingMonth, {
         numberOfMonths,
-        pagedNavigation
+        pagedNavigation,
+        startMonth: undefined,
+        endMonth: undefined
       });
       const expectedNextMonth = addMonths(startingMonth, 3);
       expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
@@ -45,7 +57,8 @@ describe("when displaying 3 months", () => {
         const result = getNextMonth(startingMonth, {
           numberOfMonths,
           pagedNavigation,
-          toMonth: addMonths(startingMonth, 1)
+          startMonth: undefined,
+          endMonth: addMonths(startingMonth, 1)
         });
         expect(result).toBe(undefined);
       });
@@ -56,7 +69,9 @@ describe("when displaying 3 months", () => {
     it("the next month is 1 months ahead", () => {
       const result = getNextMonth(startingMonth, {
         numberOfMonths,
-        pagedNavigation
+        pagedNavigation,
+        endMonth: undefined,
+        startMonth: undefined
       });
       const expectedNextMonth = addMonths(startingMonth, 1);
       expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
@@ -66,7 +81,8 @@ describe("when displaying 3 months", () => {
         const result = getNextMonth(startingMonth, {
           numberOfMonths,
           pagedNavigation,
-          toMonth: addMonths(startingMonth, 2)
+          startMonth: undefined,
+          endMonth: addMonths(startingMonth, 2)
         });
         expect(result).toBe(undefined);
       });
diff --git a/src/helpers/getPossibleFocusDate.test.ts b/src/helpers/getPossibleFocusDate.test.ts
index 666c98be7..7e03f2060 100644
--- a/src/helpers/getPossibleFocusDate.test.ts
+++ b/src/helpers/getPossibleFocusDate.test.ts
@@ -20,13 +20,13 @@ import { getPossibleFocusDate } from "./getPossibleFocusDate";
 const baseDate = new Date(2023, 0, 1); // Jan 1, 2023
 const options: Pick<
   PropsContext<Mode, boolean>,
-  "locale" | "ISOWeek" | "weekStartsOn" | "fromMonth" | "toMonth"
+  "locale" | "ISOWeek" | "weekStartsOn" | "startMonth" | "endMonth"
 > = {
   locale: undefined,
   ISOWeek: false,
   weekStartsOn: 0, // Sunday
-  fromMonth: new Date(2022, 0, 1), // Jan 1, 2022
-  toMonth: new Date(2024, 0, 1) // Jan 1, 2024
+  startMonth: new Date(2022, 0, 1), // Jan 1, 2022
+  endMonth: new Date(2024, 0, 1) // Jan 1, 2024
 };
 
 const testCases: {
@@ -98,22 +98,22 @@ ISOWeekTestCases.forEach(({ moveBy, moveDir, expectedFn }) => {
   });
 });
 
-test("should not move before fromMonth", () => {
+test("should not move before startMonth", () => {
   const result = getPossibleFocusDate(
     "day",
     "before",
     new Date(2022, 0, 2),
     options
   );
-  expect(result).toEqual(options.fromMonth);
+  expect(result).toEqual(options.startMonth);
 });
 
-test("should not move after toMonth", () => {
+test("should not move after endMonth", () => {
   const result = getPossibleFocusDate(
     "day",
     "after",
     new Date(2023, 11, 31),
     options
   );
-  expect(result).toEqual(options.toMonth);
+  expect(result).toEqual(options.endMonth);
 });
diff --git a/src/helpers/getPreviousMonth.test.ts b/src/helpers/getPreviousMonth.test.ts
index ba4d7d28b..c8d568f03 100644
--- a/src/helpers/getPreviousMonth.test.ts
+++ b/src/helpers/getPreviousMonth.test.ts
@@ -8,22 +8,32 @@ describe("when number of months is 1", () => {
   describe("when the navigation is disabled", () => {
     const disableNavigation = true;
     it("the previous month is undefined", () => {
-      const result = getPreviousMonth(startingMonth, { disableNavigation });
+      const result = getPreviousMonth(startingMonth, {
+        disableNavigation,
+        startMonth: undefined,
+        endMonth: undefined
+      });
       expect(result).toBe(undefined);
     });
   });
   describe("when in the navigable range", () => {
-    const fromMonth = addMonths(startingMonth, -3);
+    const startMonth = addMonths(startingMonth, -3);
     it("the previous month is not undefined", () => {
-      const result = getPreviousMonth(startingMonth, { fromMonth });
+      const result = getPreviousMonth(startingMonth, {
+        startMonth,
+        endMonth: undefined
+      });
       const expectedPrevMonth = addMonths(startingMonth, -1);
       expect(result && isSameMonth(result, expectedPrevMonth)).toBeTruthy();
     });
   });
   describe("when not in the navigable range", () => {
-    const fromMonth = startingMonth;
+    const startMonth = startingMonth;
     it("the previous month is undefined", () => {
-      const result = getPreviousMonth(startingMonth, { fromMonth });
+      const result = getPreviousMonth(startingMonth, {
+        startMonth,
+        endMonth: undefined
+      });
       expect(result).toBe(undefined);
     });
   });
@@ -35,7 +45,9 @@ describe("when displaying 3 months", () => {
     it("the previous month is 3 months back", () => {
       const result = getPreviousMonth(startingMonth, {
         numberOfMonths,
-        pagedNavigation
+        pagedNavigation,
+        startMonth: undefined,
+        endMonth: undefined
       });
       const expectedPrevMonth = addMonths(startingMonth, -numberOfMonths);
       expect(result && isSameMonth(result, expectedPrevMonth)).toBeTruthy();
@@ -46,7 +58,9 @@ describe("when displaying 3 months", () => {
     it("the previous month is 1 months back", () => {
       const result = getPreviousMonth(startingMonth, {
         numberOfMonths,
-        pagedNavigation
+        pagedNavigation,
+        startMonth: undefined,
+        endMonth: undefined
       });
       const expectedPrevMonth = addMonths(startingMonth, -1);
       expect(result && isSameMonth(result, expectedPrevMonth)).toBeTruthy();
diff --git a/src/helpers/getStartEndMonths.test.ts b/src/helpers/getStartEndMonths.test.ts
index 3db2e825b..805d73439 100644
--- a/src/helpers/getStartEndMonths.test.ts
+++ b/src/helpers/getStartEndMonths.test.ts
@@ -1,89 +1,91 @@
 import { getStartEndMonths } from "./getStartEndMonths";
 
-describe('when "fromMonth" is not passed in', () => {
-  test('"fromMonth" should be undefined', () => {
-    const { fromMonth } = getStartEndMonths({});
-    expect(fromMonth).toBeUndefined();
+describe('when "startMonth" is not passed in', () => {
+  test('"startMonth" should be undefined', () => {
+    const { startMonth } = getStartEndMonths({});
+    expect(startMonth).toBeUndefined();
   });
 });
-describe('when "fromMonth" is passed in', () => {
-  const { fromMonth } = getStartEndMonths({ fromMonth: new Date(2021, 4, 3) });
-  test('"fromMonth" should be the start of that month', () => {
-    expect(fromMonth).toEqual(new Date(2021, 4, 1));
+describe('when "startMonth" is passed in', () => {
+  const { startMonth } = getStartEndMonths({
+    startMonth: new Date(2021, 4, 3)
+  });
+  test('"startMonth" should be the start of that month', () => {
+    expect(startMonth).toEqual(new Date(2021, 4, 1));
   });
   describe('when "fromYear" is passed in', () => {
-    test('"fromMonth" should be the start of that month', () => {
-      expect(fromMonth).toEqual(new Date(2021, 4, 1));
+    test('"startMonth" should be the start of that month', () => {
+      expect(startMonth).toEqual(new Date(2021, 4, 1));
     });
   });
 });
 describe('when "fromYear" is passed in', () => {
-  const { fromMonth } = getStartEndMonths({ fromYear: 2021 });
-  test('"fromMonth" should be the start of that year', () => {
-    expect(fromMonth).toEqual(new Date(2021, 0, 1));
+  const { startMonth } = getStartEndMonths({ fromYear: 2021 });
+  test('"startMonth" should be the start of that year', () => {
+    expect(startMonth).toEqual(new Date(2021, 0, 1));
   });
 });
-describe('when "toMonth" is passed in', () => {
-  const { toMonth } = getStartEndMonths({ toMonth: new Date(2021, 4, 3) });
-  test('"toMonth" should be the end of that month', () => {
-    expect(toMonth).toEqual(new Date(2021, 4, 31));
+describe('when "endMonth" is passed in', () => {
+  const { endMonth } = getStartEndMonths({ endMonth: new Date(2021, 4, 3) });
+  test('"endMonth" should be the end of that month', () => {
+    expect(endMonth).toEqual(new Date(2021, 4, 31));
   });
   describe('when "fromYear" is passed in', () => {
-    test('"toMonth" should be the end of that month', () => {
-      expect(toMonth).toEqual(new Date(2021, 4, 31));
+    test('"endMonth" should be the end of that month', () => {
+      expect(endMonth).toEqual(new Date(2021, 4, 31));
     });
   });
 });
 
 describe('when "toYear" is passed in', () => {
   const toYear = 2021;
-  const expectedtoMonth = new Date(2021, 11, 31);
-  const { toMonth } = getStartEndMonths({ toYear });
-  test('"toMonth" should be the end of that year', () => {
-    expect(toMonth).toEqual(expectedtoMonth);
+  const expectedendMonth = new Date(2021, 11, 31);
+  const { endMonth } = getStartEndMonths({ toYear });
+  test('"endMonth" should be the end of that year', () => {
+    expect(endMonth).toEqual(expectedendMonth);
   });
 });
 
 describe('when "captionLayout" is dropdown', () => {
   const today = new Date(2024, 4, 3);
-  const { fromMonth, toMonth } = getStartEndMonths({
+  const { startMonth, endMonth } = getStartEndMonths({
     captionLayout: "dropdown",
     today
   });
-  test('"fromMonth" should be 100 years ago', () => {
-    expect(fromMonth).toEqual(new Date(1924, 0, 1));
+  test('"startMonth" should be 100 years ago', () => {
+    expect(startMonth).toEqual(new Date(1924, 0, 1));
   });
-  test('"toMonth" should be the end of this year', () => {
-    expect(toMonth).toEqual(new Date(2024, 11, 31));
+  test('"endMonth" should be the end of this year', () => {
+    expect(endMonth).toEqual(new Date(2024, 11, 31));
   });
   describe('when "fromYear" is set', () => {
     const today = new Date(2024, 4, 3);
     const fromYear = 2022;
-    const { fromMonth, toMonth } = getStartEndMonths({
+    const { startMonth, endMonth } = getStartEndMonths({
       captionLayout: "dropdown",
       fromYear,
       today
     });
-    test('"fromMonth" should be equal to the "fromYear"', () => {
-      expect(fromMonth).toEqual(new Date(2022, 0, 1));
+    test('"startMonth" should be equal to the "fromYear"', () => {
+      expect(startMonth).toEqual(new Date(2022, 0, 1));
     });
-    test('"toMonth" should be the end of this year', () => {
-      expect(toMonth).toEqual(new Date(2024, 11, 31));
+    test('"endMonth" should be the end of this year', () => {
+      expect(endMonth).toEqual(new Date(2024, 11, 31));
     });
   });
   describe('when "toYear" is set', () => {
     const today = new Date(2021, 4, 3);
     const toYear = 2022;
-    const { toMonth, fromMonth } = getStartEndMonths({
+    const { endMonth, startMonth } = getStartEndMonths({
       captionLayout: "dropdown",
       toYear,
       today
     });
-    test('"fromMonth" should be 100 years ago', () => {
-      expect(fromMonth).toEqual(new Date(1921, 0, 1));
+    test('"startMonth" should be 100 years ago', () => {
+      expect(startMonth).toEqual(new Date(1921, 0, 1));
     });
-    test('"toMonth" should be equal to "toYear"', () => {
-      expect(toMonth).toEqual(new Date(2022, 11, 31));
+    test('"endMonth" should be equal to "toYear"', () => {
+      expect(endMonth).toEqual(new Date(2022, 11, 31));
     });
   });
 });
diff --git a/src/helpers/getStartMonth.test.ts b/src/helpers/getStartMonth.test.ts
index f4c433d11..8eb6a591a 100644
--- a/src/helpers/getStartMonth.test.ts
+++ b/src/helpers/getStartMonth.test.ts
@@ -2,7 +2,7 @@ import { addMonths, isSameMonth } from "date-fns";
 
 import { getStartMonth } from "./getStartMonth";
 
-describe("when no toMonth is given", () => {
+describe("when no endMonth is given", () => {
   describe("when month is in context", () => {
     const month = new Date(2010, 11, 12);
     it("return that month", () => {
@@ -25,30 +25,30 @@ describe("when no toMonth is given", () => {
     });
   });
 });
-describe("when toMonth is given", () => {
-  describe("when toMonth is before the default initial date", () => {
+describe("when endMonth is given", () => {
+  describe("when endMonth is before the default initial date", () => {
     const month = new Date(2010, 11, 12);
-    const toMonth = addMonths(month, -2);
+    const endMonth = addMonths(month, -2);
     describe("when the number of month is 1", () => {
       const numberOfMonths = 1;
-      it("return the toMonth", () => {
+      it("return the endMonth", () => {
         const startMonth = getStartMonth({
           month,
-          toMonth,
+          endMonth,
           numberOfMonths
         });
-        expect(isSameMonth(startMonth, toMonth)).toBe(true);
+        expect(isSameMonth(startMonth, endMonth)).toBe(true);
       });
     });
     describe("when the number of month is 3", () => {
       const numberOfMonths = 3;
-      it("return the toMonth plus the number of months", () => {
+      it("return the endMonth plus the number of months", () => {
         const startMonth = getStartMonth({
           month,
-          toMonth,
+          endMonth,
           numberOfMonths
         });
-        const expectedMonth = addMonths(toMonth, -1 * (numberOfMonths - 1));
+        const expectedMonth = addMonths(endMonth, -1 * (numberOfMonths - 1));
         expect(isSameMonth(startMonth, expectedMonth)).toBe(true);
       });
     });