useDayPicker missing properties in v9

[staaky]

In v8, useDayPicker returned classNames, styles and components among other things. This allowed for easy recomposition for more complex layouts in custom components. This no longer works in v9.

Code

// these are no longer available in v9
const { classNames, styles, components } = useDayPicker();

Expected Behavior

Expected useDayPicker in v9 to return more of the v8 properties, at least those related to styling and components.

• v8: https://daypicker.dev/v8/api/interfaces/DayPickerContextValue
• v9: https://daypicker.dev/api/type-aliases/DayPickerContext

Screenshot

Here's basically what I'm trying to move from v8 to v9 and why those props would be useful:

[gpbl]

Hi @staaky thanks for your feedback!

I understand from the screen you are trying to do different things, but I'm not sure I get all of them. I see you need:

1. add a ref in the months container. This could be done with the Months custom component.
2. applying a CSS class to the month headers (weekdays names) to display them sticky on the top

Am I correct? Roughly it should work like the following.

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

export function Example() {
  const ref = React.useRef<HTMLDivElement>(null);
  const classNames = getDefaultClassNames();
  return (
    <DayPicker
      components={{
        Months: (props) => <div {...props} ref={ref} />
      }}
      classNames={{
        weekdays: `${classNames} your-sticky-style`
      }}
    />
  );
}

• Please note the use of getDefaultClassNames.
• The structure of DayPicker has slightly changed in V9. Please provide a more complete details about your requirements here if you need more help!

[gpbl]

I'm moving this issue to the support forum - so far I don't see any change required to the DayPicker source code. Should we should work providing better docs for migrating from older useDayPicker.

[staaky]

Hi @gpbl,

Thanks, I wasn't aware of getDefaultClassNames, that should help. The classNames returned by useDaypicker might have contained the overrides given to DayPicker, it seemed useful to be able to get those in custom components.

Instead of making all weekdays sticky, I've hidden them. Then I replaced Months with the component shown to hold just one sticky Weekdays. It used to be possible to grab the components given to DayPicker using useDaypicker, so that you could use those custom components in other custom components. If DayPicker replaced Weekdays, other components using components.Weekdays from the hook would pick up on it.

In my usecase the default components and classnames will probably be good enough. Not being able to access components and classNames given to DayPicker seems like a bit of a limitation compared to v8. I can work around it, should it really be needed I could add some more context.

[melkras]

I'm facing the same limitation when trying to use custom components within other custom components.
Postponing the upgrade to v9 for now.

[gpbl]

Not being able to access components and classNames given to DayPicker seems like a bit of a limitation compared to v8.

I see what you mean @staaky. There's really anything else preventing to add components back to useDayPicker, I will open a PR. (Reminder that the internal components are designed with accessibility in mind. Mixing them up would probably mess it up.)

However I'm interested in your use case of vertically stacked calendars, which is interesting... maybe we could support it natively in DayPicker. How does it accommodate on landscape mode, would you mind sharing more screenshots? Thanks.

[staaky]

Thanks, good point about accessibility.

The vertically scrollable datepicker is inspired by react-dates, a component Airbnb used to maintain. Here's an example:
https://react-dates.github.io/react-dates/?path=/story/daypicker--vertically-scrollable-with-12-months

It's not very suitable for small landscape devices, but in other cases, vertical scrolling seems like a very user-friendly way to select dates to me, especially on touch devices.

Here's my take on it with DayPicker (click 'Choose your dates of stay'):
https://www.bedandbreakfast.eu/en/a/P8dE4PaSJK2F/bb-veen-107

I basically took a shortcut by loading a fixed set of 12 months and removing the navigation buttons. Something for general use could have a button at the bottom to stack on more calendars (like the react-dates example), and maybe one at the top to go back in time.

I could also see a version without buttons, where infinite scroll adds calendars. That could work in both directions, but maybe that's a bit too ambitious.

Another thing I should mention with scroll, is that you probably want a way to control it. That's what the ref is for in my example, it helps scroll to the first month with a selectable date, to avoid initial scroll at a fully blocked month.

If DayPicker could natively support vertical scrolling, that would be awesome.

[gpbl]

@melkras @staaky In v9.0.9 we added back the missing properties to the DayPickerContext returned by useDayPicker.

Thanks for your feedback so far, let me know if that worked for you!

[staaky]

@gpbl Thanks, that worked.

I noticed that the Weekdays component now only renders part of the markup, in v8 it also rendered the days. So I had to add those, similar to how it's done in DayPicker.tsx. Exporting helper functions like getWeekdays might help with that.