From bf909c25f3fed9075e3363e16e875910aad63b0c Mon Sep 17 00:00:00 2001
From: Rodolfo Gobbi De Angeli <rodolfodeangeli@gmail.com>
Date: Sun, 19 Jan 2025 17:12:44 +0100
Subject: [PATCH] docs: fix custom components docs (#2668)

---
 examples/CustomDayButton.tsx              | 50 +++++++++++--------
 website/docs/guides/custom-components.mdx | 58 +++++++++++++----------
 2 files changed, 65 insertions(+), 43 deletions(-)

diff --git a/examples/CustomDayButton.tsx b/examples/CustomDayButton.tsx
index 3ee83439f..6c2af5857 100644
--- a/examples/CustomDayButton.tsx
+++ b/examples/CustomDayButton.tsx
@@ -1,27 +1,39 @@
 import React from "react";
 
-import { DayPicker } from "react-day-picker";
+import { DayButtonProps, DayPicker } from "react-day-picker";
+
+const SelectedDateContext = React.createContext<{
+  selected?: Date;
+  setSelected?: React.Dispatch<React.SetStateAction<Date | undefined>>;
+}>({});
+
+function DayButton(props: DayButtonProps) {
+  const { day, modifiers, ...buttonProps } = props;
+
+  const { setSelected } = React.use(SelectedDateContext);
+  return (
+    <button
+      {...buttonProps}
+      onClick={() => setSelected?.(undefined)}
+      onDoubleClick={() => setSelected?.(day.date)}
+    />
+  );
+}
 
 export function CustomDayButton() {
   const [selected, setSelected] = React.useState<Date>();
+
   return (
-    <DayPicker
-      mode="single"
-      onSelect={setSelected}
-      selected={selected}
-      components={{
-        DayButton: (props) => {
-          const { day, modifiers, ...buttonProps } = props;
-          return (
-            <button
-              {...buttonProps}
-              onDoubleClick={() => setSelected(day.date)}
-              onClick={() => setSelected(undefined)}
-            />
-          );
-        }
-      }}
-      footer={selected?.toDateString() || "Double click to select a date"}
-    />
+    <SelectedDateContext.Provider value={{ selected, setSelected }}>
+      <DayPicker
+        mode="single"
+        selected={selected}
+        onSelect={setSelected}
+        components={{
+          DayButton
+        }}
+        footer={selected?.toDateString() || "Double click to select a date"}
+      />
+    </SelectedDateContext.Provider>
   );
 }
diff --git a/website/docs/guides/custom-components.mdx b/website/docs/guides/custom-components.mdx
index c0eed25d2..3863acd4c 100644
--- a/website/docs/guides/custom-components.mdx
+++ b/website/docs/guides/custom-components.mdx
@@ -33,8 +33,8 @@ Pass the components to customize to the `components` prop. See the [list of cust
 ```tsx
 <DayPicker
   components={{
-    Day: (props: DayProps) => <CustomDaycell {...props} />,
-    MonthGrid: (props: MonthGridProps) => <CustomMonthGrid {...props} />
+    Day: CustomDaycell,
+    MonthGrid: CustomMonthGrid
     // etc
   }}
 />
@@ -79,33 +79,43 @@ For example, you can use a custom [DayButton](../api/functions/DayButton.md) to
 ```tsx title="./MyDatePicker.tsx"
 import React from "react";
 
-import { DayPicker } from "react-day-picker";
+import { DayButtonProps, DayPicker } from "react-day-picker";
 
-export function MyDatePicker() {
-  const [selected, setSelected] = React.useState<Date>();
+const SelectedDateContext = React.createContext<{
+  selected?: Date;
+  setSelected?: React.Dispatch<React.SetStateAction<Date | undefined>>;
+}>({});
+
+function DayButton(props: DayButtonProps) {
+  const { day, modifiers, ...buttonProps } = props;
+
+  const { setSelected } = React.use(SelectedDateContext);
   return (
-    <DayPicker
-      mode="single"
-      onSelect={setSelected}
-      selected={selected}
-      components={{
-        DayButton: (props) => {
-          const { day, modifiers, ...buttonProps } = props;
-          return (
-            <button
-              {...buttonProps}
-              // Prevent the default click event
-              onClick={() => setSelected(undefined)}
-              // Handle the double click event and reset the selection
-              onDoubleClick={() => setSelected(day.date)}
-            />
-          );
-        }
-      }}
-      footer={selected?.toDateString() || "Double click to select a date"}
+    <button
+      {...buttonProps}
+      onClick={() => setSelected?.(undefined)}
+      onDoubleClick={() => setSelected?.(day.date)}
     />
   );
 }
+
+export function CustomDayButton() {
+  const [selected, setSelected] = React.useState<Date>();
+
+  return (
+    <SelectedDateContext.Provider value={{ selected, setSelected }}>
+      <DayPicker
+        mode="single"
+        selected={selected}
+        onSelect={setSelected}
+        components={{
+          DayButton
+        }}
+        footer={selected?.toDateString() || "Double click to select a date"}
+      />
+    </SelectedDateContext.Provider>
+  );
+}
 ```
 
 <BrowserWindow>