Support ondbClick event on days

[CREDO23]

I wanted to add a handler when user double-click on a day, but I could not because the event is not supported.

[oluwatunmiisheii]

I wanted to add a handler when user double-click on a day, but I could not because the event is not supported.

you can achieve something similar like so @CREDO23

    import { DayPicker, Modifiers } from 'react-day-picker';
      const clickTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const clickCountRef = useRef<number>(0);

   const handleDayClick = (
   	day: Date,
   	modifiers: Modifiers,
   	e: React.MouseEvent<Element, MouseEvent>
   ) => {
   	if (modifiers.disabled) return;

   	clickCountRef.current += 1;

   	if (clickCountRef.current === 1) {
   		clickTimeoutRef.current = setTimeout(() => {
   			if (clickCountRef.current === 1) {
   				// Single click
   				// do something here
   			}
   			clickCountRef.current = 0;
   		}, 300); // Adjust this timeout as needed
   	} else if (clickCountRef.current === 2) {
   		if (clickTimeoutRef.current) clearTimeout(clickTimeoutRef.current);
   		// Double click
   		// do something here
   		console.log('double click');
   		clickCountRef.current = 0;
   	}
   };
   
   <DayPicker
   		mode="single"
   		onDayClick={(date, modifiers, e) =>
   			handleDayClick(date, modifiers, e)
   		}
   		selected={selected}
   		onSelect={setSelected}
   		showOutsideDays
   		
   	/>

[CREDO23]

Thanks @oluwatunmiisheii !

[gpbl]

@CREDO23 isn't event.detail enough to get the click count? https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

I never used that prop, but worth to try it in an onDayClick or with custom DayButton component.