<InfiniteScroll /> component and example

aortbals · Sep 9, 2016 · c1e6cd7 · c1e6cd7
commit c1e6cd7
Show file tree

Hide file tree

Showing 14 changed files with 287 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,14 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+npm-debug.log
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+## React Infinite Scroll
+
+This is an example of a basic React `InfiniteScroll` component.
+
+The API is simple. It accepts a prop function, `onScrollToBottom`, that will be called when the user scrolls below a given threshold. The threshold can be provided via the `offsetBottomThreshold` prop, and the default is 400px.
+
+A common use case is to fire an asynchronous action from `onScrollToBottom` to load additional data.
+
+This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="./src/favicon.ico">
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` in this folder.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "infinite-scroll-example",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.4.1"
+  },
+  "dependencies": {
+    "react": "15.3.1",
+    "react-dom": "15.3.1",
+    "throttle-debounce": "1.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "./node_modules/react-scripts/config/eslint.js"
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,27 @@
+.App {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import List from './List';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h2>React Infinite Scroll</h2>
+        </div>
+
+        <List />
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});
diff --git a/src/InfiniteScroll.jsx b/src/InfiniteScroll.jsx
@@ -0,0 +1,46 @@
+import React, { Component, PropTypes } from 'react';
+import throttle from 'throttle-debounce/throttle';
+
+export default class InfiniteScroll extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    offsetBottomThreshold: PropTypes.number.isRequired,
+    onScrollToBottom: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    offsetBottomThreshold: 400,
+  };
+
+  constructor() {
+    super();
+    this.handleScroll = throttle(200, this.handleScroll);
+  }
+
+  componentDidMount() {
+    this.refs.container.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    this.refs.container.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll = (e) => {
+    const totalHeight = e.target.scrollHeight;
+    const totalOffset = e.target.clientHeight + e.target.scrollTop;
+
+    if (totalOffset + this.props.offsetBottomThreshold >= totalHeight) {
+      this.props.onScrollToBottom(e);
+    }
+  }
+
+  render() {
+    const { children, className, ...rest } = this.props;
+
+    return (
+      <div {...rest} className={`scroll-y ${className}`} ref="container">
+        {children}
+      </div>
+    );
+  }
+}
diff --git a/src/List.css b/src/List.css
@@ -0,0 +1,22 @@
+.List-load-more-button {
+  border: 2px solid #C8CDD3;
+  transition: border 0.2s;
+  padding: 0.75rem 1.5rem;
+  margin: 1rem;
+  color: #909AA5;
+  outline: none;
+  background-color: transparent;
+  border-radius: 6px;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.List-load-more-button:disabled {
+  border: 2px solid #DEE2E6;
+}
+
+.List-load-more-button:not([disabled]):hover {
+  border: 2px solid #909AA5;
+  cursor: pointer;
+}
diff --git a/src/List.js b/src/List.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import './List.css';
+import InfiniteScroll from './InfiniteScroll';
+
+const style = {
+  item(i) {
+    return {
+      padding: '2rem',
+      fontSize: '2rem',
+      backgroundColor: i % 2 === 0 ? '#fff': '#d0ebff',
+    };
+  },
+};
+
+let offset = 0;
+let size = 5;
+
+class List extends Component {
+  state = {
+    items: [1, 2, 3, 4, 5]
+  }
+
+  loadMore = () => {
+    this.setState({ isLoading: true });
+
+    // Simulate a delay
+    this.timeout = setTimeout(() => {
+      offset += size;
+      this.setState({
+        items: [
+          ...this.state.items,
+          ...[1, 2, 3, 4, 5].map(i => i + offset)
+        ],
+        isLoading: false,
+      });
+    }, 500);
+  }
+
+  componentWillUnmount() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+  }
+
+  handleScrollToBottom = () => this.loadMore()
+  handleLoadMoreClick = () => this.loadMore()
+
+  render() {
+    const { items, isLoading } = this.state;
+
+    return (
+      <InfiniteScroll onScrollToBottom={this.handleScrollToBottom}>
+        {items.map(i =>
+          <div key={i} style={style.item(i)}>{i}</div>
+        )}
+
+        <button
+          className="List-load-more-button"
+          onClick={this.handleLoadMoreClick}
+          disabled={isLoading}>
+          {isLoading ? 'Loading...' : 'Load more'}
+        </button>
+      </InfiniteScroll>
+    );
+  }
+}
+
+export default List;
diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,12 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family:
+    -apple-system, BlinkMacSystemFont,
+    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+}
+
+.scroll-y {
+  overflow-y: scroll;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import './index.css';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);
diff --git a/src/logo.svg b/src/logo.svg