react-day-picker/website/docs/guides/custom-components.mdx

Customizable Date Picker for React

---
sidebar_position: 4
---

# Custom Components

With the `components` prop, you can extend each of the rendered HTML elements by using your own components.

| Prop Name    | Type                                                          | Description                            |
| ------------ | ------------------------------------------------------------- | -------------------------------------- |
| `components` | [`CustomComponents`](../api/type-aliases/CustomComponents.md) | Change the components of the calendar. |

You may need to use custom components in advanced applications, for example to:

- Prevent default events from occurring
- Add new event listeners, such as touch events
- Display extra content, such as a calendar entry in the day cell
- Implement buttons or dropdowns using your own design system components
- Wrap an element with another element, like adding a tooltip to a day cell.

When customizing the components, get familiar with the [API Reference](../api#components) and the [DayPicker Anatomy](../docs/anatomy.mdx). Make sure you don't break the [accessibility](../docs/accessibility.mdx).

:::note Custom Components vs Formatters

Custom components extends DayPicker more than the [formatters](../docs/translation.mdx#custom-formatters), which are used to format the content of the calendar.

:::

## Implementing a Custom Component

Pass the components you want to customize to the `components` prop. This prop accepts any of the [`CustomComponents`](../api/type-aliases/CustomComponents.md).

```tsx
<DayPicker
  components={{
    Day: (props: DayProps) => <CustomDaycell {...props} />,
    MonthGrid: (props: MonthGridProps) => <CustomMonthGrid {...props} />
    // etc
  }}
/>
```

<details>
  <summary>List of Customizable Components</summary>

| Function                                                   | Description                                                                                          |
| ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| [`Button`](../api/functions/Button.md)                     | Render the button elements in the calendar.                                                          |
| [`CaptionLabel`](../api/functions/CaptionLabel.md)         | Render the label in the month caption.                                                               |
| [`Chevron`](../api/functions/Chevron.md)                   | Render the chevron icon used in the navigation buttons and dropdowns.                                |
| [`Day`](../api/functions/Day.md)                           | Render the gridcell of a day in the calendar and handle the interaction and the focus with they day. |
| [`DayButton`](../api/functions/DayButton.md)               | Render the button for a day in the calendar.                                                         |
| [`Dropdown`](../api/functions/Dropdown.md)                 | Render a dropdown component to use in the navigation bar.                                            |
| [`DropdownNav`](../api/functions/DropdownNav.md)           | Render the the navigation dropdowns.                                                                 |
| [`Footer`](../api/functions/Footer.md)                     | Component wrapping the footer.                                                                       |
| [`Month`](../api/functions/Month.md)                       | Render the grid with the weekday header row and the weeks for the given month.                       |
| [`MonthCaption`](../api/functions/MonthCaption.md)         | Render the caption of a month in the calendar.                                                       |
| [`MonthGrid`](../api/functions/MonthGrid.md)               | Render the grid of days in a month.                                                                  |
| [`Months`](../api/functions/Months.md)                     | Component wrapping the month grids.                                                                  |
| [`Nav`](../api/functions/Nav.md)                           | Render the toolbar with the navigation button.                                                       |
| [`Option`](../api/functions/Option.md)                     | Render the `option` element.                                                                         |
| [`Root`](../api/functions/Root.md)                         | Render the root element.                                                                             |
| [`Select`](../api/functions/Select.md)                     | Render the `select` element.                                                                         |
| [`Week`](../api/functions/Week.md)                         | Render a row in the calendar, with the days and the week number.                                     |
| [`WeekNumber`](../api/functions/WeekNumber.md)             | Render the cell with the number of the week.                                                         |
| [`WeekNumberHeader`](../api/functions/WeekNumberHeader.md) | Render the column header for the week numbers.                                                       |
| [`Weekday`](../api/functions/Weekday.md)                   | Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).                              |
| [`Weekdays`](../api/functions/Weekdays.md)                 | Render the row with the weekday names.                                                               |
| [`Weeks`](../api/functions/Weeks.md)                       | Render the weeks in the month grid.                                                                  |

</details>

## Examples

:::note

We are adding new examples soon. What are you using custom components for? [Let us know](https://github.com/gpbl/react-day-picker/discussions).

:::

### Intercepting Click Events

For example, you can use a custom [DayButton](../api/functions/DayButton.md) to select days only with a double-click event.

```tsx title="./MyDatePicker.tsx"
import React from "react";

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

export function MyDatePicker() {
  const [selected, setSelected] = React.useState<Date>();
  return (
    <DayPicker
      mode="single"
      onSelect={setSelected}
      selected={selected}
      components={{
        DayButton: (props) => {
          const { day, modifiers, ...buttonProps } = props;
          return (
            <button
              {...buttonProps}
              // Prevent the default click event
              onClick={() => setSelected(undefined)}
              // Handle the double click event and reset the selection
              onDoubleClick={() => setSelected(day.date)}
            />
          );
        }
      }}
      footer={selected?.toDateString() || "Double click to select a date"}
    />
  );
}
```

<BrowserWindow>
  <Examples.CustomDayButton />
</BrowserWindow>

## DayPicker Hook

In a custom component, you can implement the [`useDayPicker`](../api/functions/useDayPicker.md) hook to access to the [DayPicker context](../api/type-aliases/DayPickerContext.md).

The DayPicker context provides the current state of the calendar, such as the selected days, the modifiers, and the navigation state.

| Function                                           | Return value                                                  | Description                                                                  |
| :------------------------------------------------- | ------------------------------------------------------------- | :--------------------------------------------------------------------------- |
| [`useDayPicker`](../api/functions/useDayPicker.md) | [`DayPickerContext`](../api/type-aliases/DayPickerContext.md) | Return the current state of DayPicker and functions to navigate the calendar |