Merge pull request #22 from onderonur/observer

Major Update, Using IntersectionObserver Under the Hood, New Examples for Different List Types

Author: onderonur

.eslintrc.js

@@ -0,0 +1,52 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: ['react-app', 'plugin:react/recommended', 'airbnb', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint', 'prettier'],
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+  rules: {
+    'prettier/prettier': 'warn',
+    'no-shadow': 'warn',
+    'no-unused-vars': 'off',
+    "prefer-destructuring": "warn",
+    '@typescript-eslint/no-unused-vars': 'warn',
+    // For optional chaining to not create linting errors
+    'no-unused-expressions': 'off',
+    "no-plusplus": "off",
+    "operator-assignment": "warn",
+    "object-shorthand": "warn",
+    'arrow-body-style': 'off',
+    "radix": "off",
+    'import/extensions': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/order': 'off',
+    'import/newline-after-import': 'warn',
+    'no-use-before-define': 'off',
+    "@typescript-eslint/no-explicit-any": "warn",
+    '@typescript-eslint/no-use-before-define': 'warn',
+    'react/jsx-curly-newline': 'off',
+    'react/jsx-tag-spacing': 'warn',
+    'react/button-has-type': 'warn',
+    "react/jsx-fragments": "warn",
+    'react/jsx-filename-extension': [
+      'warn',
+      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+    ],
+  },
+};

.eslintrc.json

@@ -0,0 +1,3 @@
+# Change Log
+
+Plesae check [Releases](https://github.com/onderonur/react-infinite-scroll-hook/releases) page for migration instructions.

CHANGELOG.md

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+interface ListProps {
+  direction?: 'vertical' | 'horizontal';
+}
+
+export const List = styled.ul<ListProps>`
+  display: ${({ direction }) =>
+    direction === 'horizontal' ? 'flex' : 'block'};
+  list-style: none;
+  font-size: 16px;
+  margin: 0;
+  padding: 6px;
+`;
+
+export const ListItem = styled.li`
+  background-color: #fafafa;
+  border: 1px solid #99b4c0;
+  padding: 8px;
+  margin: 4px;
+`;
+
+const gradientAnimation = keyframes`
+  0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+`;
+
+const LoadingRoot = styled.div`
+  animation: ${gradientAnimation} 2s linear infinite;
+  background: linear-gradient(45deg, #298fee, #11c958, #a120bb, #d6612a);
+  background-size: 600% 600%;
+  color: #fff;
+  padding: 8px;
+`;
+
+export function Loading() {
+  return <LoadingRoot>Loading...</LoadingRoot>;
+}

example/InfiniteList.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import useInfiniteScroll from '../../src';
+import { useLoadItems } from '../utils';
+import { List, ListItem, Loading } from '../components/List';
+
+const ListContainer = styled.div`
+  background-color: #fafafa;
+`;
+
+const Footer = styled.div`
+  height: 600px;
+  background-color: #dcdcdc;
+`;
+
+function SimpleInfiniteList() {
+  const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
+
+  const [infiniteRef] = useInfiniteScroll({
+    loading,
+    hasNextPage,
+    onLoadMore: loadMore,
+    // When there is an error, we stop infinite loading.
+    // It can be reactivated by setting "error" state as undefined.
+    disabled: !!error,
+    rootMargin: '0px 0px 400px 0px',
+  });
+
+  return (
+    <>
+      <ListContainer>
+        <List>
+          {items.map((item) => (
+            <ListItem key={item.key}>{item.value}</ListItem>
+          ))}
+          {/* 
+              As long as we have a "next page", we show "Loading" right under the list.
+              When it becomes visible on the screen, or it becomes near, it triggers 'onLoadMore'.
+              This is our "sentry".
+              We can also use another "sentry" which is separated from the "Loading" component like:
+                <div ref={infiniteRef} />
+                {loading && <ListItem>Loading...</ListItem>}
+              and leave "Loading" without this ref.
+          */}
+          {hasNextPage && (
+            <ListItem ref={infiniteRef}>
+              <Loading />
+            </ListItem>
+          )}
+        </List>
+      </ListContainer>
+      <Footer>Footer</Footer>
+    </>
+  );
+}
+
+export default SimpleInfiniteList;

example/components/List.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import useInfiniteScroll from '../../src';
+import { useLoadItems } from '../utils';
+import { List, ListItem, Loading } from '../components/List';
+
+const ListContainer = styled.div`
+  max-width: 600px;
+  overflow: auto;
+  background-color: #fafafa;
+`;
+
+function InfiniteListWithHorizontalScroll() {
+  const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
+
+  const [infiniteRef, { rootRef }] = useInfiniteScroll({
+    loading,
+    hasNextPage,
+    onLoadMore: loadMore,
+    disabled: !!error,
+    rootMargin: '0px 400px 0px 0px',
+  });
+
+  return (
+    <>
+      <ListContainer ref={rootRef}>
+        <List direction="horizontal">
+          {items.map((item) => (
+            <ListItem key={item.key}>{item.value}</ListItem>
+          ))}
+          {hasNextPage && (
+            <ListItem ref={infiniteRef}>
+              <Loading />
+            </ListItem>
+          )}
+        </List>
+      </ListContainer>
+    </>
+  );
+}
+
+export default InfiniteListWithHorizontalScroll;

example/examples/InfiniteListSimple.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import useInfiniteScroll from '../../src';
+import { useLoadItems } from '../utils';
+import { List, ListItem, Loading } from '../components/List';
+
+const ListContainer = styled.div`
+  max-width: 600px;
+  overflow: auto;
+  background-color: #fafafa;
+`;
+
+function InfiniteListWithReverseHozirontalScroll() {
+  const { loading, items, hasNextPage, error, loadMore } = useLoadItems();
+
+  const [infiniteRef, { rootRef }] = useInfiniteScroll({
+    loading,
+    hasNextPage,
+    onLoadMore: loadMore,
+    disabled: !!error,
+    rootMargin: '0px 0px 0px 400px',
+  });
+
+  const scrollableRootRef = React.useRef<HTMLDivElement | null>(null);
+  const lastScrollDistanceToRightRef = React.useRef<number>();
+
+  const reversedItems = React.useMemo(() => [...items].reverse(), [items]);
+
+  // We keep the scroll position when new items are added etc.
+  React.useEffect(() => {
+    const scrollableRoot = scrollableRootRef.current;
+    const lastScrollDistanceToRight = lastScrollDistanceToRightRef.current ?? 0;
+    if (scrollableRoot) {
+      scrollableRoot.scrollLeft =
+        scrollableRoot.scrollWidth - lastScrollDistanceToRight;
+    }
+  }, [reversedItems, rootRef]);
+
+  const rootRefSetter = React.useCallback(
+    (node: HTMLDivElement) => {
+      rootRef(node);
+      scrollableRootRef.current = node;
+    },
+    [rootRef],
+  );
+
+  const handleRootScroll = React.useCallback(() => {
+    const rootNode = scrollableRootRef.current;
+    if (rootNode) {
+      const scrollDistanceToRight = rootNode.scrollWidth - rootNode.scrollLeft;
+      lastScrollDistanceToRightRef.current = scrollDistanceToRight;
+    }
+  }, []);
+
+  return (
+    <>
+      <ListContainer ref={rootRefSetter} onScroll={handleRootScroll}>
+        <List direction="horizontal">
+          {hasNextPage && (
+            <ListItem ref={infiniteRef}>
+              <Loading />
+            </ListItem>
+          )}
+          {reversedItems.map((item) => (
+            <ListItem key={item.key}>{item.value}</ListItem>
+          ))}
+        </List>
+      </ListContainer>
+    </>
+  );
+}
+
+export default InfiniteListWithReverseHozirontalScroll;