Skip to content
No description, website, or topics provided.
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.babelrc
.gitignore
README.md
package-lock.json
package.json
webpack.config.js

README.md

Infinite Scroll

An infinite scrolling list of countries.

Get Started

Clone this repository and run the following commands:

$ npm install

$ npm start

To run tests:

$ npm test

Features

A functional component using a custom hook to fetch data from a GraphQL server when the user scrolls to the bottom of the screen.

src/hooks/scroll.hook.js
useEffect(() => {
    if (document.body.offsetHeight < window.innerHeight) {
        callback();
    } else {
        window.addEventListener('scroll', _handleScroll);
    }
})

The hook initially triggers the component's callback function to load data, until the page becomes longer than the browser window - (i.e. until a scrollbar is rendered). Once the window is scrollable, a listener is attached to window's scroll event.

You can’t perform that action at this time.