diff --git a/package.json b/package.json
index 4fd684e..7631788 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
"next": "11.1.2",
"next-pwa": "^5.4.0",
"react": "17.0.2",
- "react-dom": "17.0.2"
+ "react-dom": "17.0.2",
+ "react-virtualized-auto-sizer": "^1.0.6",
+ "react-window": "^1.8.6"
}
}
diff --git a/pages/index.js b/pages/index.js
index d5a3c25..67a360a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,6 @@
import { useState } from "react";
+import { FixedSizeList } from "react-window";
+import AutoSizer from "react-virtualized-auto-sizer";
import {
Grid,
Flex,
@@ -69,45 +71,55 @@ const Footer = () => (
);
-const Element = ({ verb }) => (
-
- {
+ const verb = data[index];
+
+ return (
+
- {verb.baseForm}
-
-
-
-
- Past Form:
-
- {verb.pastForm}
-
-
-
- s/es/ies:
-
- {verb.sEsIesForm}
-
-
-
- Past Participle Form:
-
- {verb.pastParticipleForm}
-
-
-
- ing Form:
-
- {verb.ingForm}
-
-
-
-);
+
+ {verb.baseForm}
+
+
+
+
+ Past Form:
+
+ {verb.pastForm}
+
+
+
+ s/es/ies:
+
+ {verb.sEsIesForm}
+
+
+
+ Past Participle Form:
+
+ {verb.pastParticipleForm}
+
+
+
+ ing Form:
+
+ {verb.ingForm}
+
+
+
+ );
+};
export default function Home() {
const [search, setSearchTerm] = useState("");
@@ -126,8 +138,8 @@ export default function Home() {
-
-
+
+
- {filteredVerbs.map((verb) => {
+ {/* {filteredVerbs.map((verb) => {
if (verb.baseForm.trim() === "") return null;
return ;
- })}
+ })} */}
+
+ {({ height, width }) => (
+
+ {Element}
+
+ )}
+
diff --git a/yarn.lock b/yarn.lock
index 96627d4..6f8b0f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3460,6 +3460,11 @@ md5.js@^1.3.4:
inherits "^2.0.1"
safe-buffer "^5.1.2"
+"memoize-one@>=3.1.1 <6":
+ version "5.2.1"
+ resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+ integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
merge-stream@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -4058,6 +4063,19 @@ react-style-singleton@^2.1.0:
invariant "^2.2.4"
tslib "^1.0.0"
+react-virtualized-auto-sizer@^1.0.6:
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
+ integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
+
+react-window@^1.8.6:
+ version "1.8.6"
+ resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
+ integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
+ dependencies:
+ "@babel/runtime" "^7.0.0"
+ memoize-one ">=3.1.1 <6"
+
react@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"