Refactor refBreak (#76)

packages/react-chat/src/contexts/narrowProvider.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from "react";
 
-import { useRefWidthBreak } from "../hooks/useRefWidthBreak";
+import { useRefBreak } from "../hooks/useRefBreak";
 
 const NarrowContext = createContext<boolean>(false);
 
@@ -14,6 +14,6 @@ interface NarrowProviderProps {
 }
 
 export function NarrowProvider({ children, myRef }: NarrowProviderProps) {
-  const narrow = useRefWidthBreak(myRef, 736);
+  const narrow = useRefBreak(myRef?.current?.offsetWidth ?? 0, 736);
   return <NarrowContext.Provider value={narrow} children={children} />;
 }

packages/react-chat/src/hooks/useRefBreak.ts

@@ -1,15 +1,11 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
-export function useRefWidthBreak(
-  myRef: React.RefObject<HTMLHeadingElement>,
-  sizeThreshold: number
-) {
+export function useRefBreak(dimension: number, sizeThreshold: number) {
   const [widthBreak, setWidthBreak] = useState(false);
 
   useEffect(() => {
     const checkDimensions = () => {
-      const width = myRef?.current?.offsetWidth ?? 0;
-      if (width && width < sizeThreshold && width > 0) {
+      if (dimension && dimension < sizeThreshold && dimension > 0) {
         if (widthBreak === false) {
           setWidthBreak(true);
         }
@@ -24,7 +20,7 @@ export function useRefWidthBreak(
     return () => {
       window.removeEventListener("resize", checkDimensions);
     };
-  }, [myRef, widthBreak, myRef?.current?.offsetWidth]);
+  }, [dimension, widthBreak]);
 
   return widthBreak;
 }