0.2.0 • Published 9 years ago
tracked-position v0.2.0
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);
};
}
});