Add use-overflow hook (#103)

Co-authored-by: Matias Pompilio <[email protected]>
Co-authored-by: Ulises Jeremias <[email protected]>

apps/playground/src/stories/hooks/useOverflow.stories.tsx

@@ -0,0 +1,61 @@
+import React, {
+  forwardRef,
+  PropsWithChildren,
+  ReactNode,
+  Ref,
+  useRef,
+} from "react";
+import { ComponentMeta } from "@storybook/react";
+import { useOverflow } from "@nanlabs/react-hooks";
+
+interface BoxProps {
+  background?: string;
+  children?: ReactNode;
+}
+
+const Box = forwardRef((props: BoxProps, ref: Ref<HTMLDivElement>) => {
+  const style = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    overflow: "scroll",
+    background: "#108ee9",
+    textDirection: "center",
+  };
+
+  return (
+    <div ref={ref} style={style}>
+      {props.children}
+    </div>
+  );
+});
+
+Box.displayName = "Box";
+
+export const Example: React.FC<PropsWithChildren> = () => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { overflowActive } = useOverflow({
+    elementRef: ref,
+  });
+
+  return (
+    <Box ref={ref}>
+      <div
+        style={{
+          minHeight: "800px",
+          minWidth: "600px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {overflowActive ? "Element in Overflow" : "No overflow"}
+      </div>
+    </Box>
+  );
+};
+
+export default {
+  title: "React Hooks/useOverflow",
+  component: Example,
+} as ComponentMeta<typeof Example>;

packages/react-hooks/index.ts

@@ -14,4 +14,5 @@ export * from "./use-append-task";
 export * from "./use-copy-to-clipboard";
 export * from "./use-previous";
 export * from "./use-hover";
+export * from "./use-overflow";
 export * from "./use-scroll";

packages/react-hooks/use-overflow/index.ts

@@ -0,0 +1 @@
+export { default as useOverflow } from "./useOverflow";

packages/react-hooks/use-overflow/useOverflow.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from "react";
+
+export type UseOverflowParams = {
+  elementRef: React.RefObject<HTMLElement>;
+};
+
+const checkOverflow = (element: HTMLElement) => {
+  if (element)
+    return (
+      element.offsetHeight < element.scrollHeight ||
+      element.offsetWidth < element.scrollWidth
+    );
+  return false;
+};
+
+const useOverflow = ({ elementRef }: UseOverflowParams) => {
+  const [overflowActive, setOverflowActive] = useState<boolean>(false);
+
+  const onResize = useCallback(() => {
+    if (!elementRef.current) return;
+    if (checkOverflow(elementRef.current)) {
+      setOverflowActive(true);
+      return;
+    }
+    setOverflowActive(false);
+  }, [elementRef]);
+
+  useEffect(() => {
+    onResize();
+    window.addEventListener("resize", onResize);
+
+    return () => window.removeEventListener("resize", onResize);
+  }, [onResize]);
+
+  return {
+    overflowActive,
+  };
+};
+
+export default useOverflow;