✨ GC-1464 Remember the last resize position

lib/Resizable/index.tsx

@@ -1,17 +1,26 @@
 import type { PropsWithChildren } from "react";
 import React, { useCallback, useEffect, useRef } from "react";
 import { keepValueWithinRange, toPixels } from "../helpers";
+import { useLocalStorage } from "../hooks/useLocalStorage";
 
 export interface ResizableProps {
   containerWidth?: number | string;
+  id?: string;
   initialWidth?: number | string;
   minResizableWidth?: number | string;
   maxResizableWidth?: number | string;
+  rememberPosition?: boolean;
   useGutterOffset?: boolean;
 }
 
 export function Resizable(props: PropsWithChildren<ResizableProps>) {
-  const { children, initialWidth = "50%", useGutterOffset = false } = props;
+  const {
+    children,
+    id,
+    rememberPosition = false,
+    useGutterOffset = false,
+  } = props;
+  const initialWidth = toPixels(props.initialWidth ?? "50%");
   const containerWidth: number = toPixels(
     props.containerWidth ?? document.body.offsetWidth
   );
@@ -30,14 +39,21 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
     startWidth: 0,
   });
 
-  const getWidth = () => toPixels(resizeWrapperRef.current?.style.width || 0);
+  const [lastPosition, setLastPosition] = useLocalStorage(
+    `RESIZE_POSITION_${id ?? ""}`,
+    initialWidth
+  );
+
+  const getWidth = () => toPixels(resizeWrapperRef.current?.style.width ?? 0);
 
   const setWidth = (value: number) => {
     if (resizeWrapperRef.current === null) return;
 
-    resizeWrapperRef.current.style.width = `${
-      keepValueWithinRange(value, minWidth, maxWidth) - gutterSize
-    }px`;
+    const newWidth =
+      keepValueWithinRange(value, minWidth, maxWidth) - gutterSize;
+
+    resizeWrapperRef.current.style.width = `${newWidth}px`;
+    setLastPosition(newWidth);
   };
 
   const doDrag = (evt: MouseEvent) => {
@@ -85,7 +101,7 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
   };
 
   useEffect(() => {
-    setWidth(toPixels(initialWidth));
+    setWidth(rememberPosition ? lastPosition : initialWidth);
 
     // remember to remove global listeners on dismount
     return () => stopDrag();

lib/hooks/useLocalStorage.ts

@@ -0,0 +1,28 @@
+import { useState } from "react";
+
+export const useLocalStorage = (key: string, defaultValue: unknown) => {
+  const [localStorageValue, setLocalStorageValue] = useState(() => {
+    try {
+      // Try and retrieve any previously recorded values
+      const value = localStorage.getItem(key);
+      if (value) {
+        return JSON.parse(value);
+      }
+
+      // Else, record the defaultValue and return it instead
+      localStorage.setItem(key, JSON.stringify(defaultValue));
+      return defaultValue;
+    } catch (error) {
+      // Fallback to the defaultValue if we can't retrieve a previous value
+      localStorage.setItem(key, JSON.stringify(defaultValue));
+      return defaultValue;
+    }
+  });
+
+  const setLocalStorageStateValue = (value: unknown) => {
+    localStorage.setItem(key, JSON.stringify(value));
+    setLocalStorageValue(value);
+  };
+
+  return [localStorageValue, setLocalStorageStateValue];
+};

stories/components/Resizable.stories.tsx

@@ -30,9 +30,11 @@ export function Resizable() {
           }}
         >
           <ResizableComponent
+            id="sidebar"
             initialWidth="240px"
             minResizableWidth="240px"
             maxResizableWidth="33.33%"
+            rememberPosition
             useGutterOffset
           >
             {/* eslint-disable-next-line no-use-before-define */}
@@ -121,6 +123,19 @@ export function Resizable() {
           </div>
         </div>
       </StoryItem>
+
+      <StoryItem
+        title="Remember last position"
+        description="If you resize me, I'll remember where you left me when you refresh or return to the item - coz I'm nice like that!"
+      >
+        <div style={{ width: "100%" }}>
+          <ResizableComponent id="remember-me" rememberPosition useGutterOffset>
+            <div style={{ border: "1px solid green" }}>
+              <p>Move me - refresh the page - I should be where you left me!</p>
+            </div>
+          </ResizableComponent>
+        </div>
+      </StoryItem>
     </>
   );
 }