Interface: CustomComponents

Map of the components that can be changed using the components prop.

See

https://github.com/gpbl/react-day-picker/tree/main/src/components

Properties

Caption()?

optional Caption: (props) => null | Element

The component for the caption element.

Parameters

Parameter	Type
props	CaptionProps

Returns

null | Element

Source

src/types/DayPickerBase.ts:325

---

CaptionLabel()?

optional CaptionLabel: (props) => null | Element

The component for the caption element.

Parameters

Parameter	Type
props	CaptionLabelProps

Returns

null | Element

Source

src/types/DayPickerBase.ts:327

---

Day()?

optional Day: (props) => null | Element

The component for the day element.

Each Day in DayPicker should render one of the following, according to the return value of useDayRender.

• An empty Fragment, to render if isHidden is true
• A button element, when the day is interactive, e.g. is selectable
• A div or a span element, when the day is not interactive

Parameters

Parameter	Type
props	DayProps

Returns

null | Element

Source

src/types/DayPickerBase.ts:338

---

DayContent()?

optional DayContent: (props) => null | Element

The component for the content of the day element.

Parameters

Parameter	Type
props	DayContentProps

Returns

null | Element

Source

src/types/DayPickerBase.ts:340

---

Dropdown()?

optional Dropdown: (props) => null | Element

The component for the drop-down elements.

Parameters

Parameter	Type
props	DropdownProps

Returns

null | Element

Source

src/types/DayPickerBase.ts:342

---

Footer()?

optional Footer: (props) => null | Element

The component for the table footer.

Parameters

Parameter	Type
props	FooterProps

Returns

null | Element

Source

src/types/DayPickerBase.ts:344

---

Head()?

optional Head: () => null | Element

The component for the table’s head.

Returns

null | Element

Source

src/types/DayPickerBase.ts:346

---

HeadRow()?

optional HeadRow: () => null | Element

The component for the table’s head row.

Returns

null | Element

Source

src/types/DayPickerBase.ts:348

---

IconDropdown()?

optional IconDropdown: (props) => null | Element

The component for the small icon in the drop-downs.

Parameters

Parameter	Type
props	StyledComponent

Returns

null | Element

Source

src/types/DayPickerBase.ts:350

---

IconLeft()?

optional IconLeft: (props) => null | Element

The arrow left icon (used for the Navigation buttons).

Parameters

Parameter	Type
props	StyledComponent

Returns

null | Element

Source

src/types/DayPickerBase.ts:354

---

IconRight()?

optional IconRight: (props) => null | Element

The arrow right icon (used for the Navigation buttons).

Parameters

Parameter	Type
props	StyledComponent

Returns

null | Element

Source

src/types/DayPickerBase.ts:352

---

Months()?

optional Months: (props) => null | Element

The component wrapping the month grids.

Parameters

Parameter	Type
props	MonthsProps

Returns

null | Element

Source

src/types/DayPickerBase.ts:356

---

Row()?

optional Row: (props) => null | Element

The component for the table rows.

Parameters

Parameter	Type
props	RowProps

Returns

null | Element

Source

src/types/DayPickerBase.ts:358

---

WeekNumber()?

optional WeekNumber: (props) => null | Element

The component for the week number in the table rows.

Parameters

Parameter	Type
props	WeekNumberProps

Returns

null | Element

Source

src/types/DayPickerBase.ts:360