restore: Restore the changes made on 7a95428

Author: balajis-qb

docs-site/src/components/Example/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef, useMemo, useState } from "react";
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 import DatePicker, {
   registerLocale,
@@ -163,6 +163,7 @@ export default class CodeExampleComponent extends React.Component<
               scope={{
                 // NB any globals added here should also be referenced in ../../examples/.eslintrc
                 useState,
+                useMemo,
                 DatePicker,
                 CalendarContainer,
                 DateFNS,

docs-site/src/examples/live-provider-globals.d.ts

@@ -3,6 +3,7 @@ import * as DateFNS from "date-fns";
 import type { ReactDatePickerCustomHeaderProps as ReactDatePickerCustomHeaderPropsType } from "react-datepicker";
 import type { MiddlewareState as MiddlewareStateType } from "@floating-ui/react";
 declare global {
+  const useMemo: typeof React.useMemo;
   const useState: typeof React.useState;
   const DatePicker: any;
   const CalendarContainer: any;

docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx

@@ -1,60 +1,64 @@
-const CustomHeader = ({
-  monthDate,
-  customHeaderCount,
-  decreaseMonth,
-  increaseMonth,
-}: ReactDatePickerCustomHeaderProps) => (
-  <div>
-    <button
-      aria-label="Previous Month"
-      className={
-        "react-datepicker__navigation react-datepicker__navigation--previous"
-      }
-      style={customHeaderCount === 1 ? { visibility: "hidden" } : undefined}
-      onClick={decreaseMonth}
-    >
-      <span
-        className={
-          "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
-        }
-      >
-        {"<"}
-      </span>
-    </button>
-    <span className="react-datepicker__current-month">
-      {monthDate.toLocaleString("en-US", {
-        month: "long",
-        year: "numeric",
-      })}
-    </span>
-    <button
-      aria-label="Next Month"
-      className={
-        "react-datepicker__navigation react-datepicker__navigation--next"
-      }
-      style={customHeaderCount === 0 ? { visibility: "hidden" } : undefined}
-      onClick={increaseMonth}
-    >
-      <span
-        className={
-          "react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
-        }
-      >
-        {">"}
-      </span>
-    </button>
-  </div>
-);
-
 const RenderCustomHeaderTwoMonths = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+  const monthsShown = useMemo(() => 2, []);
 
   return (
     <DatePicker
-      renderCustomHeader={CustomHeader}
+      renderCustomHeader={({
+        monthDate,
+        customHeaderCount,
+        decreaseMonth,
+        increaseMonth,
+      }: ReactDatePickerCustomHeaderProps) => (
+        <div>
+          <button
+            aria-label="Previous Month"
+            className={
+              "react-datepicker__navigation react-datepicker__navigation--previous"
+            }
+            style={
+              customHeaderCount === 1 ? { visibility: "hidden" } : undefined
+            }
+            onClick={decreaseMonth}
+          >
+            <span
+              className={
+                "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
+              }
+            >
+              {"<"}
+            </span>
+          </button>
+          <span className="react-datepicker__current-month">
+            {monthDate.toLocaleString("en-US", {
+              month: "long",
+              year: "numeric",
+            })}
+          </span>
+          <button
+            aria-label="Next Month"
+            className={
+              "react-datepicker__navigation react-datepicker__navigation--next"
+            }
+            onClick={increaseMonth}
+            style={{
+              visibility:
+                customHeaderCount === monthsShown - 1 ? "visible" : "hidden",
+            }}
+          >
+            <span
+              className={
+                "react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
+              }
+            >
+              {">"}
+            </span>
+          </button>
+        </div>
+      )}
       selected={selectedDate}
       onChange={(date: Date | null) => setSelectedDate(date)}
-      monthsShown={2}
+      monthsShown={monthsShown}
     />
   );
 };