feature/waypoints

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

require('waypoints/lib/noframework.waypoints.min');

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à! ⚡