Add ID prop to be able to keep multiple lastKnownHeights

CHANGELOG.md

@@ -7,7 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [0.2.0] - 2020-5-28
+## [0.3.0] - 2021-03-19
+
+### Changed
+
+- Add `id` prop to be able to use snappy-react-grid multiple times on the same site, but with different item heights. The item height is persisted in a global variable, but now you can specify an ID to identify this specific grid and not conflict with the persisted item height from other grids.
+
+## [0.2.0] - 2020-05-28
 
 ### Changed
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "snappy-react-grid",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "author": "Alfred Ringstad, Jonatan Svennberg",
   "main": "dist/index.js",

src/index.tsx

@@ -22,6 +22,7 @@ interface ScrollHandlerArgs {
 }
 
 interface SnappyReactGridProps {
+  id?: string;
   items: any[];
   component: ComponentType<RenderComponentProps>;
   overscanRows?: number;
@@ -78,9 +79,10 @@ function stylesForItem({
   return cache[index];
 }
 
-let lastKnownHeight: number | null = null;
+const lastKnownHeights = {} as Record<string, number | null>;
 
 export function SnappyReactGrid({
+  id = 'default',
   items,
   component: RenderComponent,
   defaultVisible = 16,
@@ -102,8 +104,8 @@ export function SnappyReactGrid({
     ref: itemRef,
   });
 
-  if (currentItemHeight > 1) lastKnownHeight = currentItemHeight;
-  const itemHeight = lastKnownHeight;
+  if (currentItemHeight > 1) lastKnownHeights[id] = currentItemHeight;
+  const itemHeight = lastKnownHeights[id] || null;
 
   const styleCache = useRef<StyleCache>({});