Skip to main content

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: CaptionProps) => null | Element

Type declaration

▸ (props): null | Element

The component for the caption element.

Parameters
NameType
propsCaptionProps
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:389


CaptionLabel

Optional CaptionLabel: (props: CaptionLabelProps) => null | Element

Type declaration

▸ (props): null | Element

The component for the caption element.

Parameters
NameType
propsCaptionLabelProps
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:391


Day

Optional Day: (props: DayProps) => null | Element

Type declaration

▸ (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
NameType
propsDayProps
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:403


DayContent

Optional DayContent: (props: DayContentProps) => null | Element

Type declaration

▸ (props): null | Element

The component for the content of the day element.

Parameters
NameType
propsDayContentProps
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:405


Optional Dropdown: (props: DropdownProps) => null | Element

Type declaration

▸ (props): null | Element

The component for the drop-down elements.

Parameters
NameType
propsDropdownProps
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:407


Optional Footer: (props: FooterProps) => null | Element

Type declaration

▸ (props): null | Element

The component for the table footer.

Parameters
NameType
propsFooterProps
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:409


Optional Head: () => null | Element

Type declaration

▸ (): null | Element

The component for the table’s head.

Returns

null | Element

Defined in

src/types/DayPickerBase.ts:411


HeadRow

Optional HeadRow: () => null | Element

Type declaration

▸ (): null | Element

The component for the table’s head row.

Returns

null | Element

Defined in

src/types/DayPickerBase.ts:413


IconDropdown

Optional IconDropdown: (props: StyledComponent) => null | Element

Type declaration

▸ (props): null | Element

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

Parameters
NameType
propsStyledComponent
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:415


IconLeft

Optional IconLeft: (props: StyledComponent) => null | Element

Type declaration

▸ (props): null | Element

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

Parameters
NameType
propsStyledComponent
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:419


IconRight

Optional IconRight: (props: StyledComponent) => null | Element

Type declaration

▸ (props): null | Element

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

Parameters
NameType
propsStyledComponent
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:417


Months

Optional Months: (props: MonthsProps) => null | Element

Type declaration

▸ (props): null | Element

The component wrapping the month grids.

Parameters
NameType
propsMonthsProps
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:421


Row

Optional Row: (props: RowProps) => null | Element

Type declaration

▸ (props): null | Element

The component for the table rows.

Parameters
NameType
propsRowProps
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:423


WeekNumber

Optional WeekNumber: (props: WeekNumberProps) => null | Element

Type declaration

▸ (props): null | Element

The component for the week number in the table rows.

Parameters
NameType
propsWeekNumberProps
Returns

null | Element

Defined in

src/types/DayPickerBase.ts:425