react-simple-virtualize 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ozan Batuhan Ceylan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,130 @@
+# react-simple-virtualize
+
+![NPM Version](https://img.shields.io/npm/v/react-simple-virtualize)
+![License](https://img.shields.io/npm/l/react-simple-virtualize)
+![Size](https://img.shields.io/bundlephobia/minzip/react-simple-virtualize)
+
+**react-simple-virtualize** is a lightweight (less than 1kb), dependency-free React hook for rendering large lists efficiently.
+
+It solves the "too many DOM elements" problem by rendering only the items visible in the viewport. Perfect for scenarios where you need raw performance without the complexity or weight of larger libraries.
+
+## 🚀 Features
+
+* **Tiny:** < 1kb gzipped.
+* **Zero Dependencies:** It does one thing and does it well.
+* **Agnostic:** Works with `<div>`, `<ul>`, `<table>` or any other DOM element.
+* **TypeScript:** Written in JS but includes full Type definitions.
+
+## 📦 Installation
+
+```bash
+npm install react-simple-virtualize
+# or
+yarn add react-simple-virtualize
+```
+
+## 💻 Usage
+
+Here is a basic example of a list with 10,000 items:
+
+```jsx
+import React from 'react';
+import { useVirtualize } from 'react-simple-virtualize';
+
+const MyLargeList = () => {
+  // 1. Setup your data
+  const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
+  
+  // 2. Define dimensions
+  const containerHeight = 500;
+  const itemHeight = 50;
+
+  // 3. Initialize the hook
+  const { virtualItems, totalHeight, onScroll } = useVirtualize({
+    itemCount: items.length,
+    itemHeight,
+    containerHeight,
+    overscan: 5, // Optional: Number of items to render outside viewport
+  });
+
+  return (
+    // Outer Container: Needs fixed height & overflow-y: auto
+    <div
+      onScroll={onScroll}
+      style={{
+        height: containerHeight,
+        overflowY: 'auto',
+        position: 'relative',
+        border: '1px solid #ccc'
+      }}
+    >
+      {/* Inner Container: Sets the scrollable height */}
+      <div style={{ height: totalHeight, position: 'relative' }}>
+        
+        {/* Render only visible items */}
+        {virtualItems.map(({ index, offsetTop }) => (
+          <div
+            key={index}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: itemHeight,
+              transform: `translateY(${offsetTop}px)`, // Crucial for positioning
+              display: 'flex',
+              alignItems: 'center',
+              paddingLeft: 10,
+              background: index % 2 === 0 ? '#fff' : '#f5f5f5'
+            }}
+          >
+            {items[index]}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MyLargeList;
+```
+
+## ⚙️ API Reference
+
+### `useVirtualize(options)`
+
+| Option | Type | Required | Description |
+| :--- | :--- | :--- | :--- |
+| `itemCount` | `number` | Yes | Total number of items in the list. |
+| `itemHeight` | `number` | Yes | Height of a single item in pixels. |
+| `containerHeight` | `number` | Yes | Height of the visible scroll area (viewport). |
+| `overscan` | `number` | No | Number of extra items to render above/below the visible area (Default: 3). |
+
+### Returns
+
+| Value | Type | Description |
+| :--- | :--- | :--- |
+| `virtualItems` | `array` | Array of items to be rendered. Each item contains `{ index, offsetTop }`. |
+| `totalHeight` | `number` | Total height of the list (used for the inner container). |
+| `onScroll` | `function` | Event handler to be attached to the outer container's `onScroll`. |
+
+## 🗺️ Roadmap & Support
+
+Currently, this package is optimized for **Fixed Height** lists.
+I am actively working on the following features for the next major release:
+
+- [ ] **Dynamic Height Support:** For items with variable content (chat bubbles, feeds).
+- [ ] **Grid Virtualization:** Virtualizing both rows and columns.
+- [ ] **Horizontal Scrolling:** Support for X-axis virtualization.
+
+### ☕ Support the Development
+
+If this package saved you time or if you want to speed up the development of **Dynamic Height** support, consider buying me a coffee. It helps keep the project alive and maintained!
+
+<a href="https://www.buymeacoffee.com/obceylan" target="_blank">
+  <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" >
+</a>
+
+## 📄 License
+
+MIT © Ozan Batuhan Ceylan

package/dist/index.js

@@ -0,0 +1,2 @@
+var t=require("react");exports.useVirtualize=function(e){var r=e.itemCount,o=e.itemHeight,a=e.containerHeight,i=e.overscan,n=void 0===i?3:i,u=t.useState(0),l=u[0],h=u[1],s=t.useMemo(function(){for(var t=Math.floor(l/o),e=Math.min(r-1,Math.floor((l+a)/o)),i=Math.max(0,t-n),u=Math.min(r-1,e+n),h=[],s=i;s<=u;s++)h.push({index:s,offsetTop:s*o});return{virtualItems:h,totalHeight:r*o}},[l,r,o,a,n]);return{virtualItems:s.virtualItems,totalHeight:s.totalHeight,onScroll:function(t){h(t.currentTarget.scrollTop)}}};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["import { useState, useMemo } from 'react';\n\nexport const useVirtualize = ({\n  itemCount,\n  itemHeight,\n  containerHeight,\n  overscan = 3\n}) => {\n  // Store the current scroll position\n  const [scrollTop, setScrollTop] = useState(0);\n\n  // Update scroll position on scroll event\n  const onScroll = (e) => {\n    setScrollTop(e.currentTarget.scrollTop);\n  };\n\n  // Memoize calculations to prevent unnecessary re-renders\n  const { virtualItems, totalHeight } = useMemo(() => {\n    // 1. Calculate the visible range based on scroll position\n    const rangeStart = Math.floor(scrollTop / itemHeight);\n    const rangeEnd = Math.min(\n      itemCount - 1,\n      Math.floor((scrollTop + containerHeight) / itemHeight)\n    );\n\n    // 2. Add overscan (buffer) to the range for smoother scrolling\n    const startIndex = Math.max(0, rangeStart - overscan);\n    const endIndex = Math.min(itemCount - 1, rangeEnd + overscan);\n\n    // 3. Generate the array of items to be rendered\n    const virtualItems = [];\n    for (let i = startIndex; i <= endIndex; i++) {\n      virtualItems.push({\n        index: i,\n        offsetTop: i * itemHeight, // Calculate absolute position for each item\n      });\n    }\n\n    // 4. Calculate total phantom height to maintain scrollbar size\n    const totalHeight = itemCount * itemHeight;\n\n    return { virtualItems, totalHeight };\n  }, [scrollTop, itemCount, itemHeight, containerHeight, overscan]);\n\n  return {\n    virtualItems,\n    totalHeight,\n    onScroll,\n  };\n};"],"names":["_ref","itemCount","itemHeight","containerHeight","_ref$overscan","overscan","_useState","useState","scrollTop","setScrollTop","_useMemo","useMemo","rangeStart","Math","floor","rangeEnd","min","startIndex","max","endIndex","virtualItems","i","push","index","offsetTop","totalHeight","onScroll","e","currentTarget"],"mappings":"6CAE6B,SAAHA,GAKpB,IAJJC,EAASD,EAATC,UACAC,EAAUF,EAAVE,WACAC,EAAeH,EAAfG,gBAAeC,EAAAJ,EACfK,SAAAA,OAAQ,IAAAD,EAAG,EAACA,EAGZE,EAAkCC,EAAQA,SAAC,GAApCC,EAASF,EAAEG,GAAAA,EAAYH,EAG9B,GAKAI,EAAsCC,EAAAA,QAAQ,WAc5C,IAZA,IAAMC,EAAaC,KAAKC,MAAMN,EAAYN,GACpCa,EAAWF,KAAKG,IACpBf,EAAY,EACZY,KAAKC,OAAON,EAAYL,GAAmBD,IAIvCe,EAAaJ,KAAKK,IAAI,EAAGN,EAAaP,GACtCc,EAAWN,KAAKG,IAAIf,EAAY,EAAGc,EAAWV,GAG9Ce,EAAe,GACZC,EAAIJ,EAAYI,GAAKF,EAAUE,IACtCD,EAAaE,KAAK,CAChBC,MAAOF,EACPG,UAAWH,EAAInB,IAOnB,MAAO,CAAEkB,aAAAA,EAAcK,YAFHxB,EAAYC,EAGlC,EAAG,CAACM,EAAWP,EAAWC,EAAYC,EAAiBE,IAEvD,MAAO,CACLe,aA5BkBV,EAAZU,aA6BNK,YA7B+Bf,EAAXe,YA8BpBC,SAnCe,SAACC,GAChBlB,EAAakB,EAAEC,cAAcpB,UAC/B,EAmCF"}

package/dist/index.modern.mjs

@@ -0,0 +1,2 @@
+import{useState as t,useMemo as o}from"react";const e=({itemCount:e,itemHeight:r,containerHeight:a,overscan:i=3})=>{const[n,l]=t(0),{virtualItems:h,totalHeight:m}=o(()=>{const t=Math.floor(n/r),o=Math.min(e-1,Math.floor((n+a)/r)),l=Math.max(0,t-i),h=Math.min(e-1,o+i),m=[];for(let t=l;t<=h;t++)m.push({index:t,offsetTop:t*r});return{virtualItems:m,totalHeight:e*r}},[n,e,r,a,i]);return{virtualItems:h,totalHeight:m,onScroll:t=>{l(t.currentTarget.scrollTop)}}};export{e as useVirtualize};
+//# sourceMappingURL=index.modern.mjs.map

package/dist/index.modern.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.mjs","sources":["../src/index.js"],"sourcesContent":["import { useState, useMemo } from 'react';\n\nexport const useVirtualize = ({\n  itemCount,\n  itemHeight,\n  containerHeight,\n  overscan = 3\n}) => {\n  // Store the current scroll position\n  const [scrollTop, setScrollTop] = useState(0);\n\n  // Update scroll position on scroll event\n  const onScroll = (e) => {\n    setScrollTop(e.currentTarget.scrollTop);\n  };\n\n  // Memoize calculations to prevent unnecessary re-renders\n  const { virtualItems, totalHeight } = useMemo(() => {\n    // 1. Calculate the visible range based on scroll position\n    const rangeStart = Math.floor(scrollTop / itemHeight);\n    const rangeEnd = Math.min(\n      itemCount - 1,\n      Math.floor((scrollTop + containerHeight) / itemHeight)\n    );\n\n    // 2. Add overscan (buffer) to the range for smoother scrolling\n    const startIndex = Math.max(0, rangeStart - overscan);\n    const endIndex = Math.min(itemCount - 1, rangeEnd + overscan);\n\n    // 3. Generate the array of items to be rendered\n    const virtualItems = [];\n    for (let i = startIndex; i <= endIndex; i++) {\n      virtualItems.push({\n        index: i,\n        offsetTop: i * itemHeight, // Calculate absolute position for each item\n      });\n    }\n\n    // 4. Calculate total phantom height to maintain scrollbar size\n    const totalHeight = itemCount * itemHeight;\n\n    return { virtualItems, totalHeight };\n  }, [scrollTop, itemCount, itemHeight, containerHeight, overscan]);\n\n  return {\n    virtualItems,\n    totalHeight,\n    onScroll,\n  };\n};"],"names":["useVirtualize","itemCount","itemHeight","containerHeight","overscan","scrollTop","setScrollTop","useState","virtualItems","totalHeight","useMemo","rangeStart","Math","floor","rangeEnd","min","startIndex","max","endIndex","i","push","index","offsetTop","onScroll","e","currentTarget"],"mappings":"8CAEa,MAAAA,EAAgBA,EAC3BC,YACAC,aACAC,kBACAC,SAAAA,EAAW,MAGX,MAAOC,EAAWC,GAAgBC,EAAS,IAQrCC,aAAEA,EAAYC,YAAEA,GAAgBC,EAAQ,KAE5C,MAAMC,EAAaC,KAAKC,MAAMR,EAAYH,GACpCY,EAAWF,KAAKG,IACpBd,EAAY,EACZW,KAAKC,OAAOR,EAAYF,GAAmBD,IAIvCc,EAAaJ,KAAKK,IAAI,EAAGN,EAAaP,GACtCc,EAAWN,KAAKG,IAAId,EAAY,EAAGa,EAAWV,GAG9CI,EAAe,GACrB,IAAK,IAAIW,EAAIH,EAAYG,GAAKD,EAAUC,IACtCX,EAAaY,KAAK,CAChBC,MAAOF,EACPG,UAAWH,EAAIjB,IAOnB,MAAO,CAAEM,eAAcC,YAFHR,EAAYC,IAG/B,CAACG,EAAWJ,EAAWC,EAAYC,EAAiBC,IAEvD,MAAO,CACLI,eACAC,cACAc,SAnCgBC,IAChBlB,EAAakB,EAAEC,cAAcpB"}

package/dist/index.module.js

@@ -0,0 +1,2 @@
+import{useState as t,useMemo as o}from"react";var r=function(r){var e=r.itemCount,a=r.itemHeight,i=r.containerHeight,n=r.overscan,l=void 0===n?3:n,h=t(0),u=h[0],m=h[1],c=o(function(){for(var t=Math.floor(u/a),o=Math.min(e-1,Math.floor((u+i)/a)),r=Math.max(0,t-l),n=Math.min(e-1,o+l),h=[],m=r;m<=n;m++)h.push({index:m,offsetTop:m*a});return{virtualItems:h,totalHeight:e*a}},[u,e,a,i,l]);return{virtualItems:c.virtualItems,totalHeight:c.totalHeight,onScroll:function(t){m(t.currentTarget.scrollTop)}}};export{r as useVirtualize};
+//# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.js","sources":["../src/index.js"],"sourcesContent":["import { useState, useMemo } from 'react';\n\nexport const useVirtualize = ({\n  itemCount,\n  itemHeight,\n  containerHeight,\n  overscan = 3\n}) => {\n  // Store the current scroll position\n  const [scrollTop, setScrollTop] = useState(0);\n\n  // Update scroll position on scroll event\n  const onScroll = (e) => {\n    setScrollTop(e.currentTarget.scrollTop);\n  };\n\n  // Memoize calculations to prevent unnecessary re-renders\n  const { virtualItems, totalHeight } = useMemo(() => {\n    // 1. Calculate the visible range based on scroll position\n    const rangeStart = Math.floor(scrollTop / itemHeight);\n    const rangeEnd = Math.min(\n      itemCount - 1,\n      Math.floor((scrollTop + containerHeight) / itemHeight)\n    );\n\n    // 2. Add overscan (buffer) to the range for smoother scrolling\n    const startIndex = Math.max(0, rangeStart - overscan);\n    const endIndex = Math.min(itemCount - 1, rangeEnd + overscan);\n\n    // 3. Generate the array of items to be rendered\n    const virtualItems = [];\n    for (let i = startIndex; i <= endIndex; i++) {\n      virtualItems.push({\n        index: i,\n        offsetTop: i * itemHeight, // Calculate absolute position for each item\n      });\n    }\n\n    // 4. Calculate total phantom height to maintain scrollbar size\n    const totalHeight = itemCount * itemHeight;\n\n    return { virtualItems, totalHeight };\n  }, [scrollTop, itemCount, itemHeight, containerHeight, overscan]);\n\n  return {\n    virtualItems,\n    totalHeight,\n    onScroll,\n  };\n};"],"names":["useVirtualize","_ref","itemCount","itemHeight","containerHeight","_ref$overscan","overscan","_useState","useState","scrollTop","setScrollTop","_useMemo","useMemo","rangeStart","Math","floor","rangeEnd","min","startIndex","max","endIndex","virtualItems","i","push","index","offsetTop","totalHeight","onScroll","e","currentTarget"],"mappings":"8CAEa,IAAAA,EAAgB,SAAHC,GAKpB,IAJJC,EAASD,EAATC,UACAC,EAAUF,EAAVE,WACAC,EAAeH,EAAfG,gBAAeC,EAAAJ,EACfK,SAAAA,OAAQ,IAAAD,EAAG,EAACA,EAGZE,EAAkCC,EAAS,GAApCC,EAASF,EAAEG,GAAAA,EAAYH,EAG9B,GAKAI,EAAsCC,EAAQ,WAc5C,IAZA,IAAMC,EAAaC,KAAKC,MAAMN,EAAYN,GACpCa,EAAWF,KAAKG,IACpBf,EAAY,EACZY,KAAKC,OAAON,EAAYL,GAAmBD,IAIvCe,EAAaJ,KAAKK,IAAI,EAAGN,EAAaP,GACtCc,EAAWN,KAAKG,IAAIf,EAAY,EAAGc,EAAWV,GAG9Ce,EAAe,GACZC,EAAIJ,EAAYI,GAAKF,EAAUE,IACtCD,EAAaE,KAAK,CAChBC,MAAOF,EACPG,UAAWH,EAAInB,IAOnB,MAAO,CAAEkB,aAAAA,EAAcK,YAFHxB,EAAYC,EAGlC,EAAG,CAACM,EAAWP,EAAWC,EAAYC,EAAiBE,IAEvD,MAAO,CACLe,aA5BkBV,EAAZU,aA6BNK,YA7B+Bf,EAAXe,YA8BpBC,SAnCe,SAACC,GAChBlB,EAAakB,EAAEC,cAAcpB,UAC/B,EAmCF"}

package/dist/index.umd.js

@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t||self).reactSimpleVirtualize={},t.react)}(this,function(t,e){t.useVirtualize=function(t){var o=t.itemCount,i=t.itemHeight,n=t.containerHeight,r=t.overscan,a=void 0===r?3:r,u=e.useState(0),f=u[0],l=u[1],s=e.useMemo(function(){for(var t=Math.floor(f/i),e=Math.min(o-1,Math.floor((f+n)/i)),r=Math.max(0,t-a),u=Math.min(o-1,e+a),l=[],s=r;s<=u;s++)l.push({index:s,offsetTop:s*i});return{virtualItems:l,totalHeight:o*i}},[f,o,i,n,a]);return{virtualItems:s.virtualItems,totalHeight:s.totalHeight,onScroll:function(t){l(t.currentTarget.scrollTop)}}}});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/index.js"],"sourcesContent":["import { useState, useMemo } from 'react';\n\nexport const useVirtualize = ({\n  itemCount,\n  itemHeight,\n  containerHeight,\n  overscan = 3\n}) => {\n  // Store the current scroll position\n  const [scrollTop, setScrollTop] = useState(0);\n\n  // Update scroll position on scroll event\n  const onScroll = (e) => {\n    setScrollTop(e.currentTarget.scrollTop);\n  };\n\n  // Memoize calculations to prevent unnecessary re-renders\n  const { virtualItems, totalHeight } = useMemo(() => {\n    // 1. Calculate the visible range based on scroll position\n    const rangeStart = Math.floor(scrollTop / itemHeight);\n    const rangeEnd = Math.min(\n      itemCount - 1,\n      Math.floor((scrollTop + containerHeight) / itemHeight)\n    );\n\n    // 2. Add overscan (buffer) to the range for smoother scrolling\n    const startIndex = Math.max(0, rangeStart - overscan);\n    const endIndex = Math.min(itemCount - 1, rangeEnd + overscan);\n\n    // 3. Generate the array of items to be rendered\n    const virtualItems = [];\n    for (let i = startIndex; i <= endIndex; i++) {\n      virtualItems.push({\n        index: i,\n        offsetTop: i * itemHeight, // Calculate absolute position for each item\n      });\n    }\n\n    // 4. Calculate total phantom height to maintain scrollbar size\n    const totalHeight = itemCount * itemHeight;\n\n    return { virtualItems, totalHeight };\n  }, [scrollTop, itemCount, itemHeight, containerHeight, overscan]);\n\n  return {\n    virtualItems,\n    totalHeight,\n    onScroll,\n  };\n};"],"names":["_ref","itemCount","itemHeight","containerHeight","_ref$overscan","overscan","_useState","useState","scrollTop","setScrollTop","_useMemo","useMemo","rangeStart","Math","floor","rangeEnd","min","startIndex","max","endIndex","virtualItems","i","push","index","offsetTop","totalHeight","onScroll","e","currentTarget"],"mappings":"kSAE6B,SAAHA,GAKpB,IAJJC,EAASD,EAATC,UACAC,EAAUF,EAAVE,WACAC,EAAeH,EAAfG,gBAAeC,EAAAJ,EACfK,SAAAA,OAAQ,IAAAD,EAAG,EAACA,EAGZE,EAAkCC,EAAQA,SAAC,GAApCC,EAASF,EAAEG,GAAAA,EAAYH,EAG9B,GAKAI,EAAsCC,EAAAA,QAAQ,WAc5C,IAZA,IAAMC,EAAaC,KAAKC,MAAMN,EAAYN,GACpCa,EAAWF,KAAKG,IACpBf,EAAY,EACZY,KAAKC,OAAON,EAAYL,GAAmBD,IAIvCe,EAAaJ,KAAKK,IAAI,EAAGN,EAAaP,GACtCc,EAAWN,KAAKG,IAAIf,EAAY,EAAGc,EAAWV,GAG9Ce,EAAe,GACZC,EAAIJ,EAAYI,GAAKF,EAAUE,IACtCD,EAAaE,KAAK,CAChBC,MAAOF,EACPG,UAAWH,EAAInB,IAOnB,MAAO,CAAEkB,aAAAA,EAAcK,YAFHxB,EAAYC,EAGlC,EAAG,CAACM,EAAWP,EAAWC,EAAYC,EAAiBE,IAEvD,MAAO,CACLe,aA5BkBV,EAAZU,aA6BNK,YA7B+Bf,EAAXe,YA8BpBC,SAnCe,SAACC,GAChBlB,EAAakB,EAAEC,cAAcpB,UAC/B,EAmCF"}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "react-simple-virtualize",
+  "version": "0.0.1",
+  "description": "A lightweight, dependency-free virtualization hook for React.",
+  "source": "src/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.module.js",
+  "unpkg": "dist/index.umd.js",
+  "types": "src/index.d.ts",
+  "scripts": {
+    "build": "microbundle",
+    "dev": "microbundle watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "virtual-list",
+    "virtualization",
+    "scroll",
+    "performance",
+    "hook"
+  ],
+  "author": "Ozan Batuhan Ceylan",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ozanbatuhanceylan/react-simple-virtualize"
+  },
+  "funding": {
+    "type": "buymeacoffee",
+    "url": "https://www.buymeacoffee.com/obceylan"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "microbundle": "^0.15.1"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,10 @@
+export function useVirtualize({ itemCount, itemHeight, containerHeight, overscan }: {
+    itemCount: any;
+    itemHeight: any;
+    containerHeight: any;
+    overscan?: number;
+}): {
+    virtualItems: any;
+    totalHeight: any;
+    onScroll: (e: any) => void;
+};

package/src/index.js

@@ -0,0 +1,50 @@
+import { useState, useMemo } from 'react';
+
+export const useVirtualize = ({
+  itemCount,
+  itemHeight,
+  containerHeight,
+  overscan = 3
+}) => {
+  // Store the current scroll position
+  const [scrollTop, setScrollTop] = useState(0);
+
+  // Update scroll position on scroll event
+  const onScroll = (e) => {
+    setScrollTop(e.currentTarget.scrollTop);
+  };
+
+  // Memoize calculations to prevent unnecessary re-renders
+  const { virtualItems, totalHeight } = useMemo(() => {
+    // 1. Calculate the visible range based on scroll position
+    const rangeStart = Math.floor(scrollTop / itemHeight);
+    const rangeEnd = Math.min(
+      itemCount - 1,
+      Math.floor((scrollTop + containerHeight) / itemHeight)
+    );
+
+    // 2. Add overscan (buffer) to the range for smoother scrolling
+    const startIndex = Math.max(0, rangeStart - overscan);
+    const endIndex = Math.min(itemCount - 1, rangeEnd + overscan);
+
+    // 3. Generate the array of items to be rendered
+    const virtualItems = [];
+    for (let i = startIndex; i <= endIndex; i++) {
+      virtualItems.push({
+        index: i,
+        offsetTop: i * itemHeight, // Calculate absolute position for each item
+      });
+    }
+
+    // 4. Calculate total phantom height to maintain scrollbar size
+    const totalHeight = itemCount * itemHeight;
+
+    return { virtualItems, totalHeight };
+  }, [scrollTop, itemCount, itemHeight, containerHeight, overscan]);
+
+  return {
+    virtualItems,
+    totalHeight,
+    onScroll,
+  };
+};