Waypoints with NPM

We use Waypoints in some of our projects and there doesn’t seem to be a lot of information out there regarding its usage with NodeJS. Specifically its usage with webpack and ESLint.

To get Waypoints into a NodeJS project that uses webpack, follow these four simple steps.

Update the Linter

Update .eslintrc.json globals object to include Waypoint:

"globals": {
"Waypoint": true

If you aren’t using a linter, you should be! (…or just skip this step.)

Install the Module

$ npm i waypoints -S

Require the Module


Note that there are other flavors (jQuery, Zepto) in the Waypoints module lib/ directory … use whatever floats your boat.

Instantiate Your Waypoint

const waypoint = new Waypoint({
element: document.getElementsByClassName('foobaz')[0],
handler: (direction) => {
console.log('waypoint', direction);

⚡ Voilà! ⚡

Like what you read? Give Stephen Koch a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.