docs: update CustomDayButton example and clarify custom components doc (#2815)

* docs: update CustomDayButton example

Signed-off-by: gpbl <[email protected]>

* Update test

Signed-off-by: gpbl <[email protected]>

* Lint file, set default formatter

Signed-off-by: gpbl <[email protected]>

---------

Signed-off-by: gpbl <[email protected]>

Author: gpbl

examples/CustomDayButton.test.tsx

@@ -21,5 +21,5 @@ test("update the footer when a day is double clicked", () => {
 
 test("update the footer when a day is single clicked", () => {
   fireEvent.click(dateButton(startOfMonth(today)));
-  expect(screen.getByText("Double click to select a date")).toBeInTheDocument();
+  expect(screen.getByText(/Double click to select a date/)).toBeInTheDocument();
 });

examples/CustomDayButton.tsx

@@ -1,19 +1,21 @@
 import React from "react";
 
-import { type DayButtonProps, DayPicker } from "react-day-picker";
+import { DayButton, type DayButtonProps, DayPicker } from "react-day-picker";
 
 const SelectedDateContext = React.createContext<{
   selected?: Date;
   setSelected?: React.Dispatch<React.SetStateAction<Date | undefined>>;
 }>({});
 
-function DayButton(props: DayButtonProps) {
+function DayButtonWithContext(props: DayButtonProps) {
   const { day, modifiers, ...buttonProps } = props;
 
   const { setSelected } = React.use(SelectedDateContext);
   return (
-    <button
+    <DayButton
       {...buttonProps}
+      day={day}
+      modifiers={modifiers}
       onClick={() => setSelected?.(undefined)}
       onDoubleClick={() => setSelected?.(day.date)}
     />
@@ -25,14 +27,15 @@ export function CustomDayButton() {
 
   return (
     <SelectedDateContext.Provider value={{ selected, setSelected }}>
+      <p>Double click to select a date or single click to clear selection</p>
       <DayPicker
         mode="single"
         selected={selected}
         onSelect={setSelected}
         components={{
-          DayButton,
+          DayButton: DayButtonWithContext,
         }}
-        footer={selected?.toDateString() || "Double click to select a date"}
+        footer={selected?.toDateString()}
       />
     </SelectedDateContext.Provider>
   );

react-day-picker.code-workspace

@@ -43,5 +43,6 @@
       "versioned_docs": true
     },
     "jest.runMode": "on-demand",
+    "editor.defaultFormatter": "biomejs.biome",
   }
 }

website/docs/guides/custom-components.mdx

@@ -28,7 +28,9 @@ Custom components allow you to extend DayPicker beyond just using [formatters](.
 
 ## Implementing a Custom Component
 
-Pass the components you want to customize to the `components` prop. See the [list of custom components](#list-of-custom-components) below.
+- Pass the components you want to customize to the `components` prop (see the [list of custom components](#list-of-custom-components) below).
+- Consider reusing the core components and composing your customizations on top of them.
+- Use a custom React Context to share state between your custom components and your application.
 
 ```tsx
 <DayPicker
@@ -107,32 +109,36 @@ The DayPicker context provides the current state of the calendar, including the
 
 ### Intercepting Click Events
 
-For example, you can use a custom [DayButton](../api/functions/DayButton.md) to select days with a double-click event.
+For example, you can use a custom [DayButton](../api/functions/DayButton.md) to select days with a double-click event. This approach uses a custom React context to share the selected date state between the custom `DayButton` and the main component.
 
 ```tsx title="./MyDatePicker.tsx"
 import React from "react";
 
-import { DayButtonProps, DayPicker } from "react-day-picker";
+import { DayButton, type DayButtonProps, DayPicker } from "react-day-picker";
 
+// Create a context to share the selected date state between the custom DayButton and the main component.
 const SelectedDateContext = React.createContext<{
   selected?: Date;
   setSelected?: React.Dispatch<React.SetStateAction<Date | undefined>>;
 }>({});
 
-function DayButton(props: DayButtonProps) {
+// Custom DayButton that uses the context to set the selected date on double-click and clear it on single click.
+function DayButtonWithContext(props: DayButtonProps) {
   const { day, modifiers, ...buttonProps } = props;
 
-  const { setSelected } = React.useContext(SelectedDateContext);
+  const { setSelected } = React.use(SelectedDateContext);
   return (
-    <button
+    <DayButton
       {...buttonProps}
+      day={day}
+      modifiers={modifiers}
       onClick={() => setSelected?.(undefined)}
       onDoubleClick={() => setSelected?.(day.date)}
     />
   );
 }
 
-export function CustomDayButton() {
+export function MyDatePicker() {
   const [selected, setSelected] = React.useState<Date>();
 
   return (
@@ -142,9 +148,8 @@ export function CustomDayButton() {
         selected={selected}
         onSelect={setSelected}
         components={{
-          DayButton,
+          DayButton: DayButtonWithContext,
         }}
-        footer={selected?.toDateString() || "Double click to select a date"}
       />
     </SelectedDateContext.Provider>
   );