DayContent missing from CustomComponents

[hrypkema-amplify]

Issue

When configuring the DayPicker without a mode, the DayContent component is not customizable in the the same way as customizing the DayButton as its missing from CustomComponents

Code

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

Types:

react-day-picker/src/types/shared.ts

Lines 47 to 92 in 095d40c

	export type CustomComponents = {
	/** Render any button element in DayPicker. */
	Button: typeof components.Button;
	/** Render the chevron icon used in the navigation buttons and dropdowns. */
	Chevron: typeof components.Chevron;
	/** Render the caption label of the month grid. */
	CaptionLabel: typeof components.CaptionLabel;
	/** Render the day cell in the month grid. */
	Day: typeof components.Day;
	/** Render the button containing the day in the day cell. */
	DayButton: typeof components.DayButton;
	/** Render the dropdown element to select years and months. */
	Dropdown: typeof components.Dropdown;
	/** Render the container of the dropdowns. */
	DropdownNav: typeof components.DropdownNav;
	/** Render the footer element announced by screen readers. */
	Footer: typeof components.Footer;
	/** Render the container of the MonthGrid. */
	Month: typeof components.Month;
	/** Render the caption of the month grid. */
	MonthCaption: typeof components.MonthCaption;
	/** Render the grid of days in a month. */
	MonthGrid: typeof components.MonthGrid;
	/** Wrapper of the month grids. */
	Months: typeof components.Months;
	/** Render the navigation element with the next and previous buttons. */
	Nav: typeof components.Nav;
	/** Render the `<option>` HTML element in the dropdown. */
	Option: typeof components.Option;
	/** Render the root element of the calendar. */
	Root: typeof components.Root;
	/** Render the select element in the dropdowns. */
	Select: typeof components.Select;
	/** Render the weeks section in the month grid. */
	Weeks: typeof components.Weeks;
	/** Render the week rows. */
	Week: typeof components.Week;
	/** Render the weekday name in the header. */
	Weekday: typeof components.Weekday;
	/** Render the row containing the week days. */
	Weekdays: typeof components.Weekdays;
	/** Render the cell with the number of the week. */
	WeekNumber: typeof components.WeekNumber;
	/** Render the header of the week number column. */
	WeekNumberHeader: typeof components.WeekNumberHeader;
	};

It is also referenced in the DayButton component:

react-day-picker/src/components/DayButton.tsx

Line 9 in 095d40c

* When not interactive, DayPicker will render a `DayContent` component instead

Question

Can DayContent be added as a component to be customized?

If not, is there an example how to set up a custom Day component to handle rendering either a custom DayContent or DayButton component based on mode?

[gpbl]

@hrypkema-amplify Yes, the DayContent component has been removed in v9.

If you want to customize the content of the day when is not the DayButton component, pass a custom formatDay formatter:

<DayPicker
  formatters={{
    formatDay: (day) => String(day.getDate())
  }}
/>

Thanks for reporting that comment in the documentation. I'm going to remove it...

[hrypkema-amplify]

@gpbl ah I see, thanks!

the use case I needed was rather to add a wrapping span element around DayContent only, and not DayButton.

in case its useful, the solution I ended up with was to create a custom Day component:

const CustomDay = ({ day, modifiers, children, mode,  ...props }) => {
  const isInteractive = mode !== undefined;

  return (
    <td {...props}>
      {!isInteractive && (
        <span className="rdp-day_content">
          {children}
        </span>
      )}
      {isInteractive && children}
    </td>
  );
};

And customizing the DayPicker with it:

import CustomDay from './CustomDay.tsx';

...

return (
  <DayPicker
    components={{
      Day: props => CustomDay({ mode, ...props }),
    }}
  />
);