Bug: 8.x release doesn't pass through extra props to useDayPicker

[reintroducing]

Bug description

Prior to the official 8.x release, I was using beta 38 and this was working fine.

To reproduce

Fork this CodeSandbox: https://codesandbox.io/s/react-day-picker-8-vl4ry with the code to reproduce the issue.

Steps

With the below code:

<DayPicker foo="foo" />

I was able to retrieve foo in a custom subcomponent with this:

const {foo} = useDayPicker();

This no longer works and foo is undefined.

Expected behavior

foo is defined in a custom child component when accessing extra props through useDayPicker.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

This was super helpful functionality to have as I'm using custom components heavily in my usage of RDP and I now don't have a way to grab those props. If there is another way to do this, what is the suggested way?

[gpbl]

Hi @reintroducing! Your sandbox is empty and doesn't help to replicate the issue.

Anyway, we won't support this way of using DayPicker. What are you trying to do?

Moving to support discussions.

[reintroducing]

@gpbl my apologies, I did not provide a sandbox because I thought you'd know from the description what I meant, so my mistake.

As for what I'm trying to do, I'm trying to pass in a few extra properties that I was then able to access in custom child components, most notably a few class names and data-test attributes. Our use case wraps RDP in a component that we have in our component library which we publish to our private npm registry and the Calendar component is the one that sets up DayPicker. We then have a few custom components (a custom Day and a custom Caption component) which also have child components (Caption for instance has a custom ArrowNavigation component or a DropdownNavigation component depending on what the captionLayout is set to).

Because of the way components are defined (in my case its just components={{Caption: Header, Day}}), I was passing all of the custom properties to DayPicker and accessing them, previously, in the beta version, through useDayPicker. They were all ending up there (as of beta 38) but that seems to have been removed with the final 8.x release. Here is an example of a child component:

import PropTypes from 'prop-types';
import {cnb} from 'cnbuilder';
import format from 'date-fns/format';
import {useDayPicker, useNavigation} from 'react-day-picker';
import IconChevronLeft from '@patientpattern/coat/icons/ChevronLeft';
import IconChevronRight from '@patientpattern/coat/icons/ChevronRight';
import IconButton from '../IconButton';
import css from './ArrowNavigation.module.scss';

const ArrowNavigation = ({date}) => {
    const {
        classNameTitle,
        classNamePrevious,
        classNameNext,
        testAttrPrevious,
        testAttrNext,
        testAttrTitle,
        previousLabel,
        nextLabel,
        disableNavigation,
        id,
    } = useDayPicker();
    const {goToMonth, previousMonth, nextMonth} = useNavigation();
    const onPreviousClick = () => {
        goToMonth(previousMonth);
    };
    const onNextClick = () => {
        goToMonth(nextMonth);
    };

    return (
        <>
            <IconButton
                className={cnb(css.previous, classNamePrevious)}
                testAttr={testAttrPrevious}
                itemLabel={previousLabel}
                disabled={disableNavigation || !previousMonth}
                onClick={onPreviousClick}
            >
                <IconChevronLeft data-coat="previous" />
            </IconButton>
            <p
                {...(id && {id: `${id}-heading`})}
                className={cnb(css.title, classNameTitle)}
                data-test={testAttrTitle}
                aria-live="polite"
                aria-atomic="true"
            >
                {format(date, 'MMMM yyyy')}
            </p>
            <IconButton
                className={cnb(css.next, classNameNext)}
                testAttr={testAttrNext}
                itemLabel={nextLabel}
                disabled={disableNavigation || !nextMonth}
                onClick={onNextClick}
            >
                <IconChevronRight data-coat="next" />
            </IconButton>
        </>
    );
};

ArrowNavigation.propTypes = {
    date: PropTypes.instanceOf(Date),
};

export default ArrowNavigation;

Hopefully all of that makes sense.

[gpbl]

Hopefully all of that makes sense.

If you need to pass extra values to a component down in the tree, you should use a React Context. Adding extra props to a component is for sure an anti-pattern. I actually wonder how could it work before :)

[reintroducing]

@gpbl I was under the impression you meant to allow that functionality and accidentally removed it in the final. And sure, I can use context, which I thought https://react-day-picker.js.org/api/functions/DayPickerProvider was exactly for that reason, so I tried to wrap my component in it but that did not work. In reading that documentation page, it seems like I should be able to just surround my component with it and I'd be able to do exactly what I was able to do before, useDayPicker to access those anywhere in the children, but I could not get that working. Is that not the purpose of that provider?

[gpbl]

DayPicker uses a React Context for the same reason, to pass down the props it receives to be consumable from the children components. But these props must be props supported by DayPicker, not random props added by the parent, which may even override the existing one – causing even more issues.

In your case, you should wrap your DayPicker instance with a context provider, and access its value directly from your custom component.

[reintroducing]

@gpbl That makes perfect sense, thank you. I was under the impression that you meant to keep passing any custom props as well so I thought it was a regression in the release since it worked in the betas, but now that I know its not, I will set up my own context and use that to pass props through to my children. Appreciate the explanations.