Mouse hover effect on range of days (v9)

[ShacharZ1]

I saw a few times this feature/ issue has been raised:

• Seems that is was possible with V7
• V8
• V9 issues, same as the one I am facing

What I am trying to achieve now is a hover "pre-selection" effect (like the one shown in the V9 example).

I have tried a few method, the base line should be a check if day is between a selected date and a hovered one and add a class to those days.

But onDayMouseEnter seems to not work properly with custom components and the picker component does not trigger an update on mouse hover, so manually doing so also does not work.

Same for modifiers, the styles or classes for them does not seems to apply.

For context here is the current code:

   export const StyledDayPicker = styled(DayPicker)<{ isRanged?: boolean }>`
    //...
   `
  <StyledDayPicker
    isRanged
    mode="range"
    selected={props.selectedRange}
    disabled={props.disabledDates}
    month={props.month}
    onSelect={callbacks.onSelect}
    onMonthChange={callbacks.onMonthChange}
    components={{
    ...components,
    }}
 />

And here is the custom day component:

export function CustomDay(
  props: {
    day: CalendarDay;
    modifiers: Modifiers;
  } & ButtonHTMLAttributes<HTMLButtonElement>
) {
  const { day, modifiers, onClick } = props;
  const { disabled, selected } = modifiers;

  const date = moment(day.date).format('D');

  return (
    <DateCell>
      <DateBox selected={selected} disabled={disabled} onClick={onClick}>
        <span>{date}</span>
      </DateBox>
    </DateCell>
  );
}

Thanks for the help!

[gpbl]

But onDayMouseEnter seems to not work properly with custom components

Interesting, what is your issue here? From the code of CustomDay above, it seems you are missing to pass onMouseEnter/onMouseLeave.

[ShacharZ1]

@rodgobbi
Do you have a code example for this use case?
I fill like I am missing something.

If it is used internally why there should be a definition in the custom component?
If the callback from onDayMouseEnter passed into the custom component as props, and then it should be used in the custom component?

But I do understand the base line, I have access to the event, it should be used from the origin of truth for it (the custom component).

Other than that, Is there a best practice to implement this hover effect with custom components?

[rodgobbi]

@ShacharZ1
You can check the internal implementation if you are curious, for example, the props passed to the default / custom components, even if you are implementing custom components, the internal logic of the DayPicker relies on event handlers passed to those components, so if you don't pass down these event handlers to the elements in your custom implementation the event handlers will never be called and the DayPicker may not work as expected.

Other than that, Is there a best practice to implement this hover effect with custom components?

Yes, my recommendation is to follow the same pattern used in the default components, spread the the custom component props onto the React elements returned by the custom component. Take a look at Day and DayButton for reference.

[ShacharZ1]

@rodgobbi
Thanks, it does make more sense now, I managed to mark the dates between the selected the date and the hovered one, by checking if each date is between those dates.

I will need to implement more logic in order to get the fully expected behavior, like - hover effect to left or the right based on where the user hover.

Is there some kind of existing solution or indicators (like class names) that can help with this implementation?

[rodgobbi]

@ShacharZ1 glad to hear.

I don't know if there's any existing solution. You will need to investigate based on your use case.

For class names, you can check the styling docs, there are a lot of classes applied to the mounted elements and you can add your own class names if needed.

[ShacharZ1]

@rodgobbi
I was wondering if there is an example for v9, like there is for v7:
https://react-day-picker-v7.netlify.app/examples/selected-range-enter