DEMO
Demo is no logner available due to heroku ending freetier. Local installation will still show demo.
This is react typescript infinite scroll example using react-virtualized. I do not recommend using it. (Alternatives: React-Virtuoso)
bvaughn/react-virtualized#1655 (comment)
npm install
Execute command under each folder.
- infinite-scroll
- fake-api
Go to fake-api/src/index.ts
/**
* @description populate db with N number of entries
*/
populateDatabase(500);
- comment this line out after initial execution and re-start the server.
fake-api/src/api/posts/index.ts
/**
* @description response delay
*/
await sleep(1750);
- slow down response on server-side. (can be done via browser)
Because some files are referred as absolute path, you need to open each project as root folder.
npm start
: starts api server on port 5611.
npm start
: starts dev server on port 3000 and api requests will be redirected to fake-api server. (see infinite-scroll/package.json)
- list windowing
- full page infinite loading
- scroll to top on navigation
- scroll to top on active link click (this prevents refreshing but can be addressed)
- auto width/height
- scroll restoration on feed page
- sticky/fixed header
- responsive/resize
- invalidate data to refetch on focus