feat: react-hook-scroll npm publish v 0.1.0

Author: imb96

dist/VirtualScroll.hook.js

@@ -0,0 +1,35 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+export const useVirtualScroll = ({
+  list,
+  onItemSelected
+}) => {
+  const scrollList = useMemo(() => [null, null, ...list, null, null], [list]);
+  const scrollRef = useRef(null);
+  const [centerIndex, setCenterIndex] = useState(0);
+  useEffect(() => {
+    if (scrollRef.current) {
+      const scrollContainer = scrollRef.current;
+      const updateCenterItemWithRef = () => {
+        const containerHeight = scrollContainer.clientHeight;
+        const itemHeight = 2.5 * 16;
+        const scrollTop = scrollContainer.scrollTop;
+        const centerScroll = containerHeight / 2;
+        const centerItemIndex = Math.floor((scrollTop + centerScroll) / itemHeight);
+        setCenterIndex(centerItemIndex);
+        onItemSelected(scrollList[centerItemIndex]);
+      };
+      scrollContainer.addEventListener("scroll", updateCenterItemWithRef);
+      updateCenterItemWithRef();
+      return () => {
+        scrollContainer.removeEventListener("scroll", updateCenterItemWithRef);
+      };
+    }
+  }, [scrollList, onItemSelected]);
+  return {
+    state: {
+      scrollList,
+      scrollRef,
+      centerIndex
+    }
+  };
+};

src/index.js

@@ -1,17 +1 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+export { default as VirtualScroll } from "./VirtualScroll";

src/lib/VirtualScroll.hook.js

@@ -0,0 +1,40 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+
+export const useVirtualScroll = ({ list, onItemSelected }) => {
+  const scrollList = useMemo(() => [null, null, ...list, null, null], [list]);
+  const scrollRef = useRef(null);
+  const [centerIndex, setCenterIndex] = useState(0);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      const scrollContainer = scrollRef.current;
+      const updateCenterItemWithRef = () => {
+        const containerHeight = scrollContainer.clientHeight;
+        const itemHeight = 2.5 * 16;
+        const scrollTop = scrollContainer.scrollTop;
+        const centerScroll = containerHeight / 2;
+        const centerItemIndex = Math.floor(
+          (scrollTop + centerScroll) / itemHeight
+        );
+        setCenterIndex(centerItemIndex);
+
+        onItemSelected(scrollList[centerItemIndex]);
+      };
+      scrollContainer.addEventListener("scroll", updateCenterItemWithRef);
+
+      updateCenterItemWithRef();
+
+      return () => {
+        scrollContainer.removeEventListener("scroll", updateCenterItemWithRef);
+      };
+    }
+  }, [scrollList, onItemSelected]);
+
+  return {
+    state: {
+      scrollList,
+      scrollRef,
+      centerIndex,
+    },
+  };
+};

src/lib/VirtualScroll.jsx

@@ -0,0 +1,27 @@
+import { useVirtualScroll } from "./VirtualScroll.hook";
+import "./VirtualScroll.styles.css";
+
+export const VirtualScroll = ({ list, onItemSelected, width }) => {
+  const {
+    state: { scrollList, scrollRef, centerIndex },
+  } = useVirtualScroll({
+    list,
+    onItemSelected,
+  });
+
+  return (
+    <div ref={scrollRef} width={width} className="Container">
+      <div className="List">
+        {scrollList.map((item, index) => (
+          <div key={index}>
+            {index === centerIndex ? (
+              <div className="CenterItem">{item}</div>
+            ) : (
+              <div className="Item">{item}</div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

src/lib/VirtualScroll.styles.css

@@ -0,0 +1,35 @@
+.Container {
+  width: 100px;
+  height: 13rem;
+  overflow: auto;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.List {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+}
+
+.Item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2.5rem;
+  font-weight: 300;
+  color: #374151;
+  transition: background-color 0.3s;
+}
+
+.CenterItem {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2.5rem;
+  font-weight: 300;
+  background-color: rgba(200, 200, 200, 0.3);
+}