0.2%",
22 | "not dead",
23 | "not ie <= 11",
24 | "not op_mini all"
25 | ],
26 | "devDependencies": {
27 | "@babel/core": "^7.3.4",
28 | "@babel/preset-env": "^7.3.4",
29 | "@babel/preset-react": "^7.0.0",
30 | "babel-jest": "23.6.0",
31 | "eslint": "5.12.0",
32 | "eslint-plugin-react": "^7.12.4",
33 | "eslint-plugin-react-hooks": "^1.2.0",
34 | "rollup": "^1.4.1",
35 | "rollup-plugin-babel": "^4.3.2",
36 | "rollup-plugin-terser": "^4.0.4",
37 | "react-test-renderer": "16.8.3",
38 | "react-testing-library": "6.0.0"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdubourg001/react-infinite-list/a8328a13a84c62dcfe3f35649cc8904a5307bc59/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
15 |
16 |
25 | React App
26 |
27 |
28 |
29 |
30 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import terser from "rollup-plugin-terser";
2 | import babel from "rollup-plugin-babel";
3 |
4 | const config = {
5 | input: "src/InfiniteList.jsx",
6 | external: ["react"],
7 | output: {
8 | format: "umd",
9 | name: "react-infinite-list",
10 | globals: {
11 | react: "React"
12 | }
13 | },
14 | plugins: [
15 | babel({
16 | exclude: "node_modules/**"
17 | }),
18 | terser.terser()
19 | ]
20 | };
21 | export default config;
22 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import InfiniteList from "./InfiniteList";
3 | import mock_fetch from "./mock_data";
4 |
5 | const App = () => {
6 | const [rows, setRows] = useState([]);
7 | const limit = 10;
8 |
9 | const fetchData = offset =>
10 | mock_fetch(offset, limit).then(data => {
11 | setRows([...rows, ...data]);
12 | });
13 |
14 | return (
15 |
16 | {(row, index, ref) => (
17 |
18 | {row.name}
19 |
20 | )}
21 |
22 | );
23 | };
24 |
25 | export default App;
26 |
--------------------------------------------------------------------------------
/src/InfiniteList.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useEffect, useState } from "react";
2 |
3 | const InfiniteList = ({
4 | rows,
5 | fetchData,
6 | limit,
7 | containerClasses,
8 | containerStyle,
9 | fetchThreshold,
10 | children
11 | }) => {
12 | const [offset, setOffset] = useState(0);
13 | const viewRef = useRef(null);
14 | const [refs, setRefs] = useState(new Map());
15 | const fetchTh = fetchThreshold ? fetchThreshold : 5;
16 |
17 | const defaultStyle = {
18 | width: "200px",
19 | maxHeight: "100px",
20 | overflowY: "scroll",
21 | marginTop: "100px",
22 | marginLeft: "auto",
23 | marginRight: "auto"
24 | };
25 |
26 | const isScrolledIntoView = (elem, view) => {
27 | const viewRect = view.getBoundingClientRect();
28 | const elemRect = elem.getBoundingClientRect();
29 |
30 | return (
31 | elemRect.top + elemRect.height >= viewRect.top &&
32 | elemRect.top < viewRect.top + viewRect.height
33 | );
34 | };
35 |
36 | useEffect(() => {
37 | if (rows.length === 0) fetchData(offset);
38 | setOffset(rows.length);
39 | }, [rows]);
40 |
41 | return (
42 | {
46 | for (
47 | let i = refs.size - fetchTh < 0 ? 0 : refs.size - fetchTh;
48 | i < refs.size;
49 | i++
50 | ) {
51 | if (isScrolledIntoView(refs.get(i), viewRef.current)) {
52 | fetchData(offset, limit);
53 | break;
54 | }
55 | }
56 | }}
57 | className={containerClasses}
58 | style={containerStyle ? containerStyle : defaultStyle}
59 | >
60 | {rows.map((row, index) =>
61 | children(row, index, c => setRefs(refs.set(index, c)))
62 | )}
63 |
64 | );
65 | };
66 |
67 | export default InfiniteList;
68 |
--------------------------------------------------------------------------------
/src/InfiniteList.test.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render, cleanup, fireEvent } from "react-testing-library";
3 |
4 | import InfiniteList from "./InfiniteList";
5 | import mock_fetch from "./mock_data";
6 |
7 | let rows = [];
8 | const limit = 10;
9 |
10 | afterEach(cleanup);
11 |
12 | it("should fetch on first render", () => {
13 | const fetchData = jest.fn(offset => {
14 | mock_fetch(offset, limit).then(data => {
15 | rows = [...rows, ...data];
16 | expect(rows.length).toBe(limit);
17 | });
18 | });
19 |
20 | render(
21 |
22 | {(row, index, ref) => (
23 |
24 | {row.name}
25 |
26 | )}
27 |
28 | );
29 |
30 | // should have been called since row was empty on render
31 | expect(fetchData).toHaveBeenCalledTimes(1);
32 | });
33 |
34 | /*
35 | it("should fetch again onScroll", () => {
36 | rows = [];
37 | for (let i = 0; i < 7; i++) {
38 | rows.push({ name: `I'm row number ${i}` });
39 | }
40 |
41 | const fetchData = jest.fn();
42 |
43 | const { container } = render(
44 |
45 | {(row, index, ref) => (
46 |
47 | {row.name}
48 |
49 | )}
50 |
51 | );
52 |
53 | // should not have been called yet since rows isn't empty
54 | expect(fetchData).toHaveBeenCalledTimes(0);
55 |
56 | const infiniteListWrapper = container.querySelector("#infinite-list-wrapper");
57 | console.log(infiniteListWrapper);
58 |
59 | fireEvent.scroll(infiniteListWrapper);
60 | });
61 | */
62 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App";
4 |
5 | ReactDOM.render(, document.getElementById("root"));
--------------------------------------------------------------------------------
/src/mock_data.js:
--------------------------------------------------------------------------------
1 | const MOCK_DATA = (offset, limit) => {
2 | const data = [];
3 | for (let i = 0; i < limit; i++) {
4 | data.push({ name: `Offset is ${offset + i}, limit is ${limit}` });
5 | }
6 | return data;
7 | };
8 |
9 | export const mock_fetch = (offset, limit) => {
10 | return Promise.resolve(MOCK_DATA(offset, limit));
11 | };
12 |
13 | export default mock_fetch;
14 |
--------------------------------------------------------------------------------