From ba6ce6e267c8d89ae60d1efbd36b660769c60a89 Mon Sep 17 00:00:00 2001 From: onderonur Date: Fri, 9 Aug 2024 23:09:37 +0300 Subject: [PATCH] migrating to turborepo & tsup continued --- .all-contributorsrc | 5 +- .eslintrc.js | 10 - .github/workflows/nextjs.yml | 68 + .github/workflows/quality.yml | 22 +- .gitignore | 1 - .husky/pre-commit | 2 +- .nvmrc | 1 + CONTRIBUTING.md | 136 + LICENSE | 4 +- README.md | 156 +- apps/demo/.eslintrc.js | 2 +- apps/demo/lint-staged.config.mjs | 1 + apps/demo/next.config.mjs | 9 + apps/demo/package.json | 25 +- apps/demo/public/next.svg | 1 - apps/demo/public/vercel.svg | 1 - apps/demo/src/app/page.tsx | 23 +- .../src/components/infinite-list-simple.tsx | 4 +- .../infinite-list-with-horizontal-scroll.tsx | 4 +- ...te-list-with-reverse-horizontal-scroll.tsx | 4 +- ...nite-list-with-reverse-vertical-scroll.tsx | 4 +- .../infinite-list-with-vertical-scroll.tsx | 4 +- apps/demo/src/components/list.tsx | 4 +- apps/demo/src/utils/index.ts | 6 +- apps/demo/tsconfig.json | 4 +- .../generic.js => lint-staged.config.mjs | 4 +- package-lock.json | 4355 +++++++++++------ package.json | 29 +- packages/eslint-config/library.js | 34 - packages/eslint-config/next.js | 31 +- packages/eslint-config/package.json | 15 +- packages/eslint-config/prettier.js | 7 + .../{react-internal.js => react-library.js} | 33 +- packages/eslint-config/typescript.js | 1 + packages/eslint-config/unicorn.js | 14 + packages/lint-staged-config/generic.mjs | 6 + packages/lint-staged-config/next.js | 11 - packages/lint-staged-config/next.mjs | 19 + packages/lint-staged-config/package.json | 4 +- .../react-infinite-scroll-hook/.eslintrc.js | 16 +- packages/react-infinite-scroll-hook/LICENSE | 21 + packages/react-infinite-scroll-hook/README.md | 155 + .../lint-staged.config.js | 3 - .../lint-staged.config.mjs | 1 + .../react-infinite-scroll-hook/package.json | 26 +- .../react-infinite-scroll-hook/src/index.ts | 12 +- .../src/use-infinite-scroll.ts | 15 +- .../react-infinite-scroll-hook/tsconfig.json | 5 +- .../react-infinite-scroll-hook/tsup.config.ts | 1 - packages/typescript-config/base.json | 5 +- packages/typescript-config/nextjs.json | 3 +- packages/typescript-config/package.json | 1 - prettier.config.js | 8 +- turbo.json | 20 +- 54 files changed, 3487 insertions(+), 1869 deletions(-) delete mode 100644 .eslintrc.js create mode 100644 .github/workflows/nextjs.yml create mode 100644 .nvmrc create mode 100644 CONTRIBUTING.md mode change 100644 => 120000 README.md create mode 100644 apps/demo/lint-staged.config.mjs delete mode 100644 apps/demo/public/next.svg delete mode 100644 apps/demo/public/vercel.svg rename packages/lint-staged-config/generic.js => lint-staged.config.mjs (53%) delete mode 100644 packages/eslint-config/library.js create mode 100644 packages/eslint-config/prettier.js rename packages/eslint-config/{react-internal.js => react-library.js} (50%) create mode 100644 packages/eslint-config/unicorn.js create mode 100644 packages/lint-staged-config/generic.mjs delete mode 100644 packages/lint-staged-config/next.js create mode 100644 packages/lint-staged-config/next.mjs create mode 100644 packages/react-infinite-scroll-hook/LICENSE create mode 100644 packages/react-infinite-scroll-hook/README.md delete mode 100644 packages/react-infinite-scroll-hook/lint-staged.config.js create mode 100644 packages/react-infinite-scroll-hook/lint-staged.config.mjs diff --git a/.all-contributorsrc b/.all-contributorsrc index a94e2be..aa116b8 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -3,7 +3,7 @@ "projectOwner": "onderonur", "repoType": "github", "repoHost": "https://github.com", - "files": ["README.md"], + "files": ["./packages/react-infinite-scroll-hook/README.md"], "imageSize": 100, "commit": true, "commitConvention": "none", @@ -30,5 +30,6 @@ "contributions": ["example"] } ], - "contributorsPerLine": 7 + "contributorsPerLine": 7, + "linkToUsage": true } diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index dc3c978..0000000 --- a/.eslintrc.js +++ /dev/null @@ -1,10 +0,0 @@ -// This configuration only applies to the package manager root. -/** @type {import("eslint").Linter.Config} */ -module.exports = { - ignorePatterns: ['apps/**', 'packages/**'], - extends: ['@repo/eslint-config/library.js'], - parser: '@typescript-eslint/parser', - parserOptions: { - project: true, - }, -}; diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml new file mode 100644 index 0000000..33e0aa7 --- /dev/null +++ b/.github/workflows/nextjs.yml @@ -0,0 +1,68 @@ +# https://github.com/actions/starter-workflows/blob/main/pages/nextjs.yml +# Sample workflow for building and deploying a Next.js site to GitHub Pages +# +# To get started with Next.js see: https://nextjs.org/docs/getting-started +# +name: Deploy Next.js site to Pages + +on: + # Runs when `Quality` workflow gets completed on `main` branch + workflow_run: + branches: ['main'] + workflows: ['Quality'] + types: + - completed + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: 'pages' + cancel-in-progress: false + +jobs: + # Build job + build: + # Since `workflow_run` only has 3 activity types (`completed`, `requested` and `in_progress`), + # even if `Quality` workflow gets completed by failing, this workflow starts to run. + # To prevent this, we add a condition here. + # https://github.com/orgs/community/discussions/26238#discussioncomment-3250901 + if: ${{ github.event.workflow_run.conclusion == 'success' }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Install + uses: ./.github/composite-actions/install + - name: Build with Next.js + run: npm run build -- --filter=demo + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: ./apps/demo/out + + # Deployment job + deploy: + # Since `workflow_run` only has 3 activity types (`completed`, `requested` and `in_progress`), + # even if `Quality` workflow gets completed by failing, this workflow starts to run. + # To prevent this, we add a condition here. + # https://github.com/orgs/community/discussions/26238#discussioncomment-3250901 + if: ${{ github.event.workflow_run.conclusion == 'success' }} + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/quality.yml b/.github/workflows/quality.yml index 5093cb8..9586559 100644 --- a/.github/workflows/quality.yml +++ b/.github/workflows/quality.yml @@ -2,9 +2,11 @@ name: Quality on: push: - branches: - # TODO: This will be replaced with `main` later. - - monorepo + branches: ['main'] + pull_request: + branches: ['main'] + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: # To cancel previous workflow when a new one is triggered. concurrency: @@ -18,12 +20,10 @@ jobs: steps: - name: Check out uses: actions/checkout@v4 - - name: Install uses: ./.github/composite-actions/install - - name: Run format check - run: npm run format + run: npm run format:check lint: name: Lint @@ -31,12 +31,10 @@ jobs: steps: - name: Check out uses: actions/checkout@v4 - - name: Install uses: ./.github/composite-actions/install - - name: Run lint check - run: npm run lint + run: npm run lint:check typecheck: name: Typecheck @@ -44,12 +42,10 @@ jobs: steps: - name: Check out uses: actions/checkout@v4 - - name: Install uses: ./.github/composite-actions/install - - name: Run type check - run: npm run typecheck + run: npm run types:check build: name: Build @@ -57,9 +53,7 @@ jobs: steps: - name: Check out uses: actions/checkout@v4 - - name: Install uses: ./.github/composite-actions/install - - name: Run build run: npm run build diff --git a/.gitignore b/.gitignore index 96fab4f..4006871 100644 --- a/.gitignore +++ b/.gitignore @@ -27,7 +27,6 @@ out/ build dist - # Debug npm-debug.log* yarn-debug.log* diff --git a/.husky/pre-commit b/.husky/pre-commit index f3f510d..73c4a3d 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,2 +1,2 @@ npx lint-staged -npm run typecheck +npm run types:check diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..2edeafb --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +20 \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..fafd488 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,136 @@ +# Contributing + +This repository is created by using [Turborepo](https://turbo.build/repo). To understand the repository structure better, please check its [documentation](https://turbo.build/repo/docs). + +## Local Development + +After cloning the repository, we need to install the dependencies. + +```bash +npm install +``` + +To start the demo Next.js app which uses the local version of `react-infinite-scroll-hook`, we can run `dev` script. + +```bash +npm run dev +``` + +After this, we can open `http://localhost:3000` in the browser to display the app. + +## Code Quality Checks + +We use automated checks by using [ESLint](https://eslint.org/), [Prettier](https://prettier.io/) and [TypeScript](https://www.typescriptlang.org/) to provide the highest quality code as it can be. + +All checks are run automatically before committing by using [husky](https://github.com/typicode/husky) and [lint-staged](https://github.com/lint-staged/lint-staged). + +The checks can be run manually by running the below command too. + +```bash +npm run codequality:check +``` + +And the same checks can be run also by enabling fixes for auto-fixable issues. + +```bash +npm run codequality:fix +``` + +`codequality` scripts run underlying ESLint (`lint`), Prettier (`format`) and TypeScript (`types`) scripts. To run these tools individually, we can also use the below scripts. + +```bash +# ESLint checks +npm run lint:check +# ESLint fixes +npm run lint:fix + +# Prettier checks +npm run format:check +# Prettier fixes +npm run format:fix + +# TypeScript checks +npm run types:check +# There is no auto-fix script for TypeScript. +``` + +## Updating Dependencies + +We use `npm-check-updates` package to automatically check if there are newer versions of our dependencies. + +To run it, we can use the below command. It starts an interactive CLI to check the dependencies of all the apps and packages, including the root dependencies. + +```bash +npm run updates:check +``` + +## Adding Contributors + +[all-contributors-cli](https://github.com/all-contributors/cli) is used for maintaining the contributors of this repository. + +To add a new contributor, we can run the below command and follow its instructions. + +```bash +npm run contributors:add +``` + +## Prepublish Checks + +To be sure everything is OK with the latest changes, we can use [publint](https://publint.dev/) and [Are the Types Wrong](https://github.com/arethetypeswrong/arethetypeswrong.github.io). + +Firstly, we need to build the bundle with the latest changes. + +```bash +npm run build:bundle +``` + +This command will create (or update) the `packages/react-infinite-scroll-hook/dist` folder, which will be used by the clients of this package. + +To be sure the output is OK for ESM and CJS clients, we can run the below commands and check their outputs. + +```bash +# For `publint` +npm run publint:check -w react-infinite-scroll-hook + +# For `Are the Types Wrong` +npm run attw:check -w react-infinite-scroll-hook +``` + +To see the content of the package which can be uploaded to [npm](https://www.npmjs.com/) can be seen by using the below command. It will create a tarball from `react-infinite-scroll-hook` package. + +```bash +npm pack -w react-infinite-scroll-hook +``` + +Or the below command can be used to only check the tarball contents without creating it. + +```bash +npm pack --dry-run -w react-infinite-scroll-hook +``` + +Lastly, we can run the below command to auto correct common errors in `package.json` of the package to be published. `npm publish` command already does these auto-fixes too. + +```bash +npm pkg fix -w react-infinite-scroll-hook +``` + +## Publishing the Package + +Firstly, we need to bump the package version which can be done by using the below commands. + +```bash +npm version patch -w react-infinite-scroll-hook +# Bumps the patch number like 0.0.0 -> 0.0.1 + +npm version minor -w react-infinite-scroll-hook +# Bumps the patch number like 0.0.x -> 0.1.0 + +npm version major -w react-infinite-scroll-hook +# Bumps the patch number like 0.x.y -> 1.0.0 +``` + +And we can publish the new version now πŸš€ + +```bash +npm publish -w react-infinite-scroll-hook +``` diff --git a/LICENSE b/LICENSE index 77ef9b4..fcafabd 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2020 onderonur +Copyright (c) 2019 onderonur Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index ebdc7ea..0000000 --- a/README.md +++ /dev/null @@ -1,155 +0,0 @@ -# react-infinite-scroll-hook - -![Build status](https://img.shields.io/github/actions/workflow/status/onderonur/react-infinite-scroll-hook/quality.yml) -![License](https://img.shields.io/npm/l/react-infinite-scroll-hook) -![Version](https://img.shields.io/npm/v/react-infinite-scroll-hook) - - - -[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-) - - - -This is a hook to create infinite scroll components! -**Live demo is [here](https://onderonur.github.io/react-infinite-scroll-hook/).** - -Basically, we need to set a `sentry` component to trigger infinite loading. When `sentry` becomes visible on the screen or it comes near to be visible (based on our config of course), it triggers infinite loading (by calling `onLoadMore` callback) all with the help of `IntersectionObserver`. - -`sentry` should be some component which will **not** be unmounted as long as we want to keep the infinite scrolling observer **active**. For example, we can use a "loading" indicator as our sentry. The trick is, because that we want to keep the infinite scrolling observer active as long as there is a **next page**, we need to keep this "loading" component mounted even if we don't have a `loading` flag as `true`. This will also keep our layout more consistent and prevent flickering etc. - -We don't need to use a "loading" component as the `sentry` and we can keep them separate too. It can be anything like some empty `div` or last item of your list etc. We just need to place it based on our scrolling direction. To bottom if we want to trigger loading when we scroll to bottom, to top if we want to trigger it when we scroll to top like a chat message box etc. Same approach can be used with horizontal scrolling too. - -Please check below to find examples with different layouts and libraries. - -**Note:** This package uses `IntersectionObserver` under the hood. You might want to check the browser compatibility from **[here](https://caniuse.com/intersectionobserver)** and if you want to support older browsers, you might need to use a polyfill. - -Before **v4**, `useInfiniteScroll` hook would basically check the DOM with an interval and look at the distance between the bottom of your "infinite" component and the bottom of the window. This was a simple solution. But it had its difficulties. It was not so easy to change the layout of your "infinite" component (like creating a chat message box with inverted scrolling etc). It was a requirement to modify the package based on each different use case. - -And also, checking the DOM with an interval by using `setInterval` wasn't a sophisticated solution. It was enough, but it had it's limits. -With **v4**, we migrated to use `IntersectionObserver` and created a much more flexible API to support different design. Basically, now we have a little bit more [inversion of control](https://kentcdodds.com/blog/inversion-of-control). - -If you want to use the older version which is using `setInterval`, you can find it **[here](https://github.com/onderonur/react-infinite-scroll-hook/tree/v3)**. - -## Installation - -```sh -npm install react-infinite-scroll-hook -``` - -## Simple Example - -```javascript -import useInfiniteScroll from 'react-infinite-scroll-hook'; - -function SimpleInfiniteList() { - const { loading, items, hasNextPage, error, loadMore } = useLoadItems(); - - const [sentryRef] = 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` is passed to `IntersectionObserver`. - // We can use it to trigger 'onLoadMore' when the sentry comes near to become - // visible, instead of becoming fully visible on the screen. - rootMargin: '0px 0px 400px 0px', - }); - - return ( - - {items.map((item) => ( - {item.value} - ))} - {/* - As long as we have a "next page", we show "Loading" right under the list. - When it becomes visible on the screen, or it comes near, it triggers 'onLoadMore'. - This is our "sentry". - We can also use another "sentry" which is separated from the "Loading" component like: -
- {loading && Loading...} - and leave "Loading" without this ref. - */} - {(loading || hasNextPage) && ( - - - - )} - - ); -} -``` - -Or if we have a scrollable container and we want to use it as our "list container" instead of `document`, we just need to use `rootRef` like: - -```js -function InfiniteListWithVerticalScroll() { - const { loading, items, hasNextPage, error, loadMore } = useLoadItems(); - - const [sentryRef, { rootRef }] = useInfiniteScroll({ - loading, - hasNextPage, - onLoadMore: loadMore, - disabled: !!error, - rootMargin: '0px 0px 400px 0px', - }); - - return ( - - - {items.map((item) => ( - {item.value} - ))} - {(loading || hasNextPage) && ( - - - - )} - - - ); -} -``` - -## Other Examples - -You can find different layout examples **[here](https://github.com/onderonur/react-infinite-scroll-hook/tree/master/example/examples)**. **[Live demo](https://onderonur.github.io/react-infinite-scroll-hook/)** contains all of these cases. - -Also, we have more realistinc examples with [swr](https://github.com/onderonur/tmdb-explorer) and [Apollo GraphQL](https://github.com/onderonur/rick-and-morty-graphql) too. - -## Arguments - -| Name | Description | Type | Optional | Default Value | -| ----------- | ------------------------------------------------------------------------------------------------ | ------------ | -------- | ------------- | -| loading | Some sort of "is fetching" info of the request. | boolean | ❌ | | -| hasNextPage | If the list has more items to load. | boolean | ❌ | | -| onLoadMore | The callback function to execute when the 'onLoadMore' is triggered. | VoidFunction | ❌ | | -| rootMargin | We pass this to 'IntersectionObserver'. We can use it to configure when to trigger 'onLoadMore'. | string | βœ… | | -| disabled | Flag to stop infinite scrolling. Can be used in case of an error etc too. | boolean | βœ… | | -| delayInMs | How long it should wait before triggering 'onLoadMore' (in milliseconds). | number | βœ… | 100 | - -## Contributors ✨ - -Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): - - - - - - - - - - -

Eugene Fidelin
πŸ’»
Evan Cater
πŸ“–
Romain
πŸ’‘
- - - - - - -This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! diff --git a/README.md b/README.md new file mode 120000 index 0000000..d6bc516 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +packages/react-infinite-scroll-hook/README.md \ No newline at end of file diff --git a/apps/demo/.eslintrc.js b/apps/demo/.eslintrc.js index c52decb..97e77b0 100644 --- a/apps/demo/.eslintrc.js +++ b/apps/demo/.eslintrc.js @@ -1,7 +1,7 @@ /** @type {import("eslint").Linter.Config} */ module.exports = { root: true, - extends: ['@repo/eslint-config/next.js', '@repo/eslint-config/typescript.js'], + extends: ['@repo/eslint-config/next.js'], parser: '@typescript-eslint/parser', parserOptions: { project: true, diff --git a/apps/demo/lint-staged.config.mjs b/apps/demo/lint-staged.config.mjs new file mode 100644 index 0000000..8bf95e1 --- /dev/null +++ b/apps/demo/lint-staged.config.mjs @@ -0,0 +1 @@ +export { default } from '@repo/lint-staged-config/next.mjs'; diff --git a/apps/demo/next.config.mjs b/apps/demo/next.config.mjs index 05c1535..31eec64 100644 --- a/apps/demo/next.config.mjs +++ b/apps/demo/next.config.mjs @@ -1,9 +1,18 @@ /** @type {import('next').NextConfig} */ const nextConfig = { output: 'export', + basePath: '/react-infinite-scroll-hook', images: { unoptimized: true, }, + eslint: { + dirs: [ + 'src', + 'lint-staged.config.mjs', + 'postcss.config.js', + 'tailwind.config.ts', + ], + }, }; export default nextConfig; diff --git a/apps/demo/package.json b/apps/demo/package.json index 271f516..fef47f8 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -11,22 +11,23 @@ "typecheck": "tsc" }, "dependencies": { - "next": "14.1.4", - "react": "^18", - "react-dom": "^18", + "next": "14.2.5", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-infinite-scroll-hook": "*" }, "devDependencies": { "@repo/eslint-config": "*", + "@repo/lint-staged-config": "*", "@repo/typescript-config": "*", - "@types/node": "^20", - "@types/react": "^18", - "@types/react-dom": "^18", - "autoprefixer": "^10.4.19", - "eslint": "^8", - "eslint-config-next": "14.1.4", - "postcss": "^8", - "tailwindcss": "^3.4.3", - "typescript": "^5" + "@types/node": "^22.4.0", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "autoprefixer": "^10.4.20", + "eslint": "^8.57.0", + "eslint-config-next": "14.2.5", + "postcss": "^8.4.41", + "tailwindcss": "^3.4.10", + "typescript": "^5.5.4" } } diff --git a/apps/demo/public/next.svg b/apps/demo/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/apps/demo/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/demo/public/vercel.svg b/apps/demo/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/apps/demo/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/demo/src/app/page.tsx b/apps/demo/src/app/page.tsx index ee127cd..d40e63b 100644 --- a/apps/demo/src/app/page.tsx +++ b/apps/demo/src/app/page.tsx @@ -23,36 +23,41 @@ export default function Page() { let InfiniteList; switch (listType) { - case InfiniteListType.VERTICAL_SCROLL: + case InfiniteListType.VERTICAL_SCROLL: { InfiniteList = InfiniteListWithVerticalScroll; break; - case InfiniteListType.HORIZONTAL_SCROLL: + } + case InfiniteListType.HORIZONTAL_SCROLL: { InfiniteList = InfiniteListWithHorizontalScroll; break; - case InfiniteListType.REVERSE_VERTICAL_SCROLL: + } + case InfiniteListType.REVERSE_VERTICAL_SCROLL: { InfiniteList = InfiniteListWithReverseVerticalScroll; break; - case InfiniteListType.REVERSE_HORIZONTAL_SCROLL: + } + case InfiniteListType.REVERSE_HORIZONTAL_SCROLL: { InfiniteList = InfiniteListWithReverseHozirontalScroll; break; - default: + } + default: { InfiniteList = InfiniteListSimple; + } } return ( -
+

Infinite List

-

+

Created by using β€œreact-infinite-scroll-hook”