gpbl/react-day-picker

useDayPicker missing properties in v9

Closed this issue · 2 comments

staaky commented

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.

Screenshot

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

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 commented

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!