Feature: Add use-scroll hook (#102)

* Add use-scroll hook

* changes from feedback

---------

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

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

@@ -0,0 +1,71 @@
+import React, {
+  forwardRef,
+  PropsWithChildren,
+  ReactNode,
+  Ref,
+  useRef,
+} from "react";
+import { ComponentMeta } from "@storybook/react";
+import { useScroll } 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",
+    background: props.background,
+    minWidth: "200px",
+    minHeight: "250px",
+  };
+
+  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 { scroll } = useScroll({
+    elementRef: ref,
+  });
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        position: "relative",
+      }}
+    >
+      <button onClick={() => scroll("left", 200)}>Left</button>
+      <div
+        style={{
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "row",
+          width: "200px",
+        }}
+        ref={ref}
+      >
+        <Box background="red">Item 1</Box>
+        <Box background="blue">Item 2</Box>
+        <Box background="green">Item 3</Box>
+      </div>
+      <button onClick={() => scroll("right", 200)}>Right</button>
+    </div>
+  );
+};
+
+export default {
+  title: "React Hooks/useScroll",
+  component: Example,
+} as ComponentMeta<typeof Example>;

packages/react-hooks/index.ts

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

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

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

packages/react-hooks/use-scroll/useScroll.ts

@@ -0,0 +1,33 @@
+import { useCallback } from "react";
+
+export type UseScrollParams = {
+  elementRef: React.RefObject<HTMLElement>;
+};
+
+export type ScrollDirections = "top" | "bot" | "left" | "right";
+
+const useScroll = ({ elementRef }: UseScrollParams) => {
+  const scroll = useCallback(
+    (direction: ScrollDirections, spaceToScroll: number) => {
+      if (!elementRef.current) return;
+
+      const topMovement = direction === "top" ? spaceToScroll : 0;
+      const botMovement = direction === "bot" ? -spaceToScroll : 0;
+      const leftMovement = direction === "left" ? -spaceToScroll : 0;
+      const rightMovement = direction === "right" ? spaceToScroll : 0;
+
+      elementRef.current.scrollBy({
+        top: topMovement || botMovement,
+        left: leftMovement || rightMovement,
+        behavior: "smooth",
+      });
+    },
+    [elementRef]
+  );
+
+  return {
+    scroll,
+  };
+};
+
+export default useScroll;