albertfdp / react-track

Track the position of DOM elements. Create cool animations.

react-track

Avoid it if you can, but for a certain class of (mostly animation-related) problems, you need to query the DOM. This library provides a way to track DOM elements in a functional, declarative manner.

npm install react-track --save

Note: tweening, animation, and timeline-related stuff lives here: react-imation

• Demo: [source] tracking components and tweening

<TrackDocument />

Used to track:

• document.documentElement
• document.documentElement.getBoundingClientRect()

import {TrackDocument, Track} from 'react-track';
import {getDocumentRect,
        getDocumentElement} from 'react-track/tracking-formulas';

// ...render:
  <TrackDocument formulas={[getDocumentRect]}>
  {rect =>
    <div>
      The height of documentElement is {rect.height}
    </div>}
  </TrackDocument>

<Track />

Use <Track /> to track any Component instance. For example, track an <h2 />:

import {TrackDocument, Track} from 'react-track';
import {topTop} from 'react-track/tracking-formulas';


// ...render:
  <TrackDocument formulas={[topTop]}>
  {topTop =>

    <Track component="h2" formulas={[topTop]}>
    {(H2,posTopTop) =>
      <H2>My top is {posTopTop}px from the viewport's top.</H2>
    }</Track>

  }</TrackDocument>

or track your AwesomeComponent

// ...render:
  <TrackDocument formulas={[topTop]}>
  {topTop =>

    <Track component={AwesomeComponent} formulas={[topTop]}>
    {(AwesomeComponentTracked,posTopTop) =>
      <AwesomeComponentTracked>
        My top is {posTopTop}px from the viewport's top.
      </AwesomeComponentTracked>
    }</Track>

  }</TrackDocument>

Note that in the code above, there are two different scopes with a topTop variable. One scope is nested inside of the other. The topTop variable of the inner scope is the result of calling the topTop of the outer scope which returns type function. Here is the definition of the topTop function of the outer scope:

export const topTop = containerRect => rect =>
  ~~(rect.top - containerRect.top);

In the outer scope, the <TrackDocument /> component supplies the containerRect argument, which comes from document.documentElement.getClientBoundingRect(). In the inner scope, the <Track /> component supplies the rect argument which comes from awesomeDOMElement.getClientBoundingRect().

<TrackedDiv />

It's pretty common to need to track a div, so there's TrackedDiv component which is a slightly simpler version of Track:

import {TrackDocument, TrackedDiv} from 'react-track';
import {topBottom} from 'react-track/tracking-formulas';

// ...render:
  <TrackDocument formulas={[topBottom]}>
  {topBottom =>

    <TrackedDiv formulas={[topBottom]}>
    {(posTopBottom) =>
      <b>My top is {posTopBottom}px from the viewport's bottom</b>
    }</TrackedDiv>

  }</TrackDocument>

tracking-formulas.js

The tracking components explained above all accept a formulas prop which expects an array of formula functions. When a tracking component renders, it passes the same arguments to all of the formulas and the results are passed as arguments into the function which you should supply to the children prop of the tracking component.

The signature for all formula functions which are passed as an array into the formulas prop is:

trackingFormula(rect, element) {
  // return any type
}

Of course, it's common to only utilize the first or second argument.

Notice that all of the following are valid formulas that only utilize a single argument:

const getDocumentRect = documentRect => documentRect;
const getDocumentElement = (_,documentElement) => documentElement;
const calculateScrollY = ({top}) => -top;

Here's a valid formula which returns a valid formula:

const centerCenter = (containerRect, container) => rect =>
  ~~(rect.top + rect.height / 2 - containerRect.top - container.clientHeight / 2);

When a formula returns a formula, we are calculating something that relies on tracking two different elements. In this case, centerCenter calculates the distance from the vertical center of some element to the vertical center of some container element. The container element could be document.documentElement if you utilize TrackDocument, or it could be any other DOM element if you utilize Track or TrackedDiv.

Creating custom formulas is relatively easy. Check out tracking-formulas.js for inspiration.