tracked-position

Create positioning strategies that depend on window or document events to compute coordinates and then subscribe to events when those coordinates change.

Why?

This is motivated by a need to share coordinates that may depend on window scroll or resize events between multiple React components. Manually adding a bunch of window event handlers inside of componentDidMount can get sloppy, so this abstracts that so that you can simply pass in an x, y pair as props or state.

Note that this does not actually have any dependency on React and may be generally useful.

Getting started

npm install tracked-position

Example usage

Register a position:

var tracker = require("tracked-position");
tracker.trackPosition("MY_POSITION", { strategy: "MANUAL", x: 100, y: 100 }, function(coordinates) { 
    // Called on initial track and when coordinates change.
});

Get the coordinates for the position:

tracker.getCoordinates("MY_POSITION");

Add a custom strategy:

tracker.addStrategy("CUSTOM_SCROLL_STRATEGY", {
    events: ["scroll"],
    update: function(options, e) {
        return {
            x: window.innerWidth - Math.min(100, window.scrollX);
            y: window.innerHeight - Math.min(100, window.scrollY);
        };
    }
});