Custom Components

Draft

This documentation is still a work in progress. If you have any questions, ask to the discussions page on Github.

Use the components prop to replace some of the internal components used by DayPicker with a custom implementation.

For example, if you need to customize the component creating the day cell, you can replace the DayContent component with a custom implementation.

./CustomDayContent.tsx

import { type DayContentProps } from "react-day-picker";

/** Replace the 19th with an emoji */
export function CustomDayContent(props: DayContentProps) {
  return (
    <span style={{ position: "relative", overflow: "visible" }}>
      {props.date.getDate() === 19 ? ` 🎉` : props.date.getDate()}
    </span>
  );
}

Then passed the custom component to the DayPicker component:

./MyApp.jsx

import { CustomDayContent } from "./CustomDayContent";

<DayPicker
  components={{
    DayContent: CustomDayContent // Replace the DayContent component
  }}
/>;

September 2024

Su	Mo	Tu	We	Th	Fr	Sa
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	🎉	20	21
22	23	24	25	26	27	28
29	30

Supported Components

The customizable components are defined in the CustomComponents interface. Pass any of these to the components prop.

warning

The custom components are not part of the stable API yet, and may change in future versions.

Component	Description
Caption	The caption for each month.
CaptionLabel	The caption for each month.
Day	The day cell.
DayContent	The content of the day cell.
Dropdown	The dropdown used for navigation
Footer	The footer element.
Head	The head of the grid.
HeadRow	The row with the week names.
IconDropdown	The icon used for the dropdown.
IconLeft	The icon used for the previous month navigation.
IconRight	The icon used for the next month navigation.
Months	Wrapper for the Months grid.
Row	Render the grid row.
WeekNumber	Render the week number.

DayPicker Hooks

When creating custom components, you will find useful the DayPicker hooks.

import { useDayPicker } from "react-day-picker";

Hook	Returns	Description
useDayPicker	DayPickerContextValue	Get the props passed to DayPicker.
useNavigation	NavigationContextValue	Navigate between months and years .
useDayRender	DayRender	Render the day cell from a custom Day component.
useFocusContext	FocusContextValue	Handle the focus between elements.
useActiveModifiers	ActiveModifiers	Returns the modifiers applied to a day.

Examples

Custom Caption

Implement a custom Caption component with next/previous buttons. Note the use of the useNavigation hook to navigate between months.

import { format } from "date-fns";
import { CaptionProps, DayPicker, useNavigation } from "react-day-picker";

function CustomCaptionComponent(props: CaptionProps) {
  const { goToMonth, nextMonth, previousMonth } = useNavigation();
  return (
    <h2>
      {format(props.displayMonth, "MMM yyy")}
      <button
        disabled={!previousMonth}
        onClick={() => previousMonth && goToMonth(previousMonth)}
      >
        Previous
      </button>
      <button
        disabled={!nextMonth}
        onClick={() => nextMonth && goToMonth(nextMonth)}
      >
        Next
      </button>
    </h2>
  );
}

export function CustomCaption() {
  return (
    <DayPicker
      components={{
        Caption: CustomCaptionComponent
      }}
    />
  );
}

Sep 2024

Su	Mo	Tu	We	Th	Fr	Sa
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Range Selections with Shift Key

Implement a custom Day component to select ranges while pressing the Shift key. See examples/RangeShiftKey.tsx for the full source code.

September 2024

Su	Mo	Tu	We	Th	Fr	Sa
Please pick a day.