createTrackedComponent, createInjector

Author: gilbox

examples/demo/app.js

@@ -43,9 +43,9 @@ class App extends Component {
               alt="Fork me on GitHub"
               dataCanonicalSrc="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" /></a>
 
-          <TrackedDiv className="hero" formulas={[topTop]}>
-          { (posTopTop) =>
-            <div>
+          <Track className="hero" formulas={[topTop]}>
+          { (Div, posTopTop) =>
+            <Div>
               <a href="https://github.com/gilbox/react-track">
                 <h1
                   style={tween(scrollY, {
@@ -75,8 +75,8 @@ class App extends Component {
                   [posTopTop]: {opacity: 1, transform: translate3d(0,0,0)},
                   [posTopTop+200]: {opacity: 0, transform: translate3d(0,-150,0)}
                 })}>v</div>
-            </div>
-          }</TrackedDiv>
+            </Div>
+          }</Track>
 
           {/* fade */}
           <Track component="h2" formulas={[topBottom, centerCenter]}>

src/index.js

@@ -1,50 +1,54 @@
-import React, {Component} from 'react';
+import React from 'react';
 import { findDOMNode } from 'react-dom';
 
 export const defaultRect = { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0 };
 const identity = x => x;
 
-export class Track extends Component {
-  static propTypes = { ref: React.PropTypes.func,
-                       children: React.PropTypes.func.isRequired,
-                       formulas: React.PropTypes.array }
+export function createInjector(component) {
+  return class Track extends React.Component {
+    static propTypes = { ref: React.PropTypes.func,
+                         children: React.PropTypes.func.isRequired,
+                         formulas: React.PropTypes.array }
 
-  static defaultProps = { formulas: [identity], component: 'div' }
+    static defaultProps = { formulas: [identity], component }
 
-  constructor(props) {
-    super(props);
+    constructor(props) {
+      super(props);
 
-    const self = this;
+      const self = this;
 
-    this.DecoratedComponent = class extends Component {
-      static propTypes = { ref: React.PropTypes.func }
+      this.DecoratedComponent = class extends React.Component {
+        static propTypes = { ref: React.PropTypes.func }
 
-      render() {
-        const {ref = props.ref || identity} = this.props;
+        render() {
+          const {ref = self.props.ref || identity} = this.props;
 
-        return <props.component
-                  {...props}
-                  {...this.props}
-                  ref={r => ref(self.nodeRef = r)} />
+          return <props.component
+                    {...self.props}
+                    {...this.props}
+                    ref={r => ref(self.nodeRef = r)} />
+        }
       }
+      this.state = {};
     }
-    this.state = {};
-  }
 
-  componentWillReceiveProps() {
-    const node = findDOMNode(this.nodeRef);
-    const rect = node.getBoundingClientRect();
-    this.setState({rect, node});
-  }
+    componentWillReceiveProps() {
+      const node = findDOMNode(this.nodeRef);
+      const rect = node.getBoundingClientRect();
+      this.setState({rect, node});
+    }
 
-  render() {
-    const {rect=defaultRect, node={}} = this.state;
-    return this.props.children(this.DecoratedComponent,
-      ...this.props.formulas.map(formula => formula(rect, node)));
+    render() {
+      const {rect=defaultRect, node={}} = this.state;
+      return this.props.children(this.DecoratedComponent,
+        ...this.props.formulas.map(formula => formula(rect, node)));
+    }
   }
 }
 
-export class TrackDocument extends Component {
+export const Track = createInjector('div');
+
+export class TrackDocument extends React.Component {
   static propTypes = { children: React.PropTypes.func.isRequired,
                        formulas: React.PropTypes.array }
 
@@ -76,30 +80,37 @@ export class TrackDocument extends Component {
   }
 }
 
-export class TrackedDiv extends Component {
-  static propTypes = { children: React.PropTypes.func.isRequired,
-                       formulas: React.PropTypes.array,
-                       component: React.PropTypes.oneOfType([React.PropTypes.element,
-                                                             React.PropTypes.string]) }
+export function createTrackedComponent(component) {
+  return class Tracked extends React.Component {
+    static propTypes = { children: React.PropTypes.func.isRequired,
+                         formulas: React.PropTypes.array,
+                         component: React.PropTypes.oneOfType([React.PropTypes.element,
+                                                               React.PropTypes.string]) }
 
-  static defaultProps = { formulas: [identity], component: 'div' }
+    static defaultProps = { formulas: [identity], component }
 
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+    constructor(props) {
+      super(props);
+      this.state = {};
+    }
 
-  componentWillReceiveProps() {
-    const node = findDOMNode(this.div);
-    const rect = node.getBoundingClientRect();
-    this.setState({rect, node});
-  }
+    componentWillReceiveProps() {
+      const node = findDOMNode(this.nodeRef);
+      const rect = node.getBoundingClientRect();
+      this.setState({rect, node});
+    }
 
-  render() {
-    const {rect=defaultRect, node={}} = this.state;
-    const {component:Comp} = this.props;
-    return <Comp ref={r => this.div = r} {...this.props}>
-      {this.props.children(...this.props.formulas.map(formula => formula(rect, node)))}
-    </Comp>;
+    render() {
+      const {rect=defaultRect, node={}} = this.state;
+      const {props} = this;
+
+      return (
+        <props.component ref={r => this.nodeRef = r} {...props}>
+          {props.children(...props.formulas.map(formula => formula(rect, node)))}
+        </props.component>
+      );
+    }
   }
 }
+
+export const TrackedDiv = createTrackedComponent('div');