Release v0.2.2

README.md

@@ -82,6 +82,9 @@ In addition to these properties, all other standard React properites like `class
 `key`, etc. can be passed in as well and will be applied to the `<div>` that will
 be rendered by the `ScrollTrigger`.
 
+* `component` - Node (Default: `div`)
+* `throttleResize` - Number (Default: `100`)
+* `throttleScroll` - Number (Default: `100`)
 * `triggerOnLoad` - Boolean (Default: `true`)
 * `onEnter` - Callback `({progress, velocity}, ref) => {}`
 * `onExit` - Callback `({progress, velocity}, ref) => {}`

package.json

@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "clean-react-props": "^0.1.1",
-    "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
+    "lomit": "^0.1.1",
     "prop-types": "^15.5.10"
   },
   "devDependencies": {
@@ -51,9 +51,9 @@
     "react": "^15.6.1",
     "rollup": "^0.45.2",
     "rollup-plugin-babel": "^2.7.1",
-    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-commonjs": "^8.3.0",
     "rollup-plugin-json": "^2.3.0",
-    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-node-resolve": "^3.0.2",
     "rollup-plugin-uglify": "^2.0.1",
     "rollup-watch": "^4.3.1"
   },

src/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import omit from 'lodash.omit';
+import omit from 'lomit';
 import throttle from 'lodash.throttle';
 import cleanProps from 'clean-react-props';
 
@@ -10,11 +10,11 @@ class ScrollTrigger extends Component {
   constructor(props) {
     super(props);
 
-    this.onScroll = throttle(this.onScroll.bind(this), 100, {
+    this.onScroll = throttle(this.onScroll.bind(this), props.throttleScroll, {
       trailing: false,
     });
 
-    this.onResize = throttle(this.onResize.bind(this), 100, {
+    this.onResize = throttle(this.onResize.bind(this), props.throttleResize, {
       trailing: false,
     });
 
@@ -35,6 +35,18 @@ class ScrollTrigger extends Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.throttleScroll !== this.props.throttleScroll) {
+      this.onScroll = throttle(this.onScroll.bind(this, nextProps.throttleScroll));
+      addEventListener('scroll', this.onScroll);
+    }
+
+    if (nextProps.throttleResize !== this.props.throttleResize) {
+      this.onResize = throttle(this.onResize.bind(this, nextProps.throttleResize));
+      addEventListener('resize', this.onResize);
+    }
+  }
+
   componentWillUnmount() {
     removeEventListener('resize', this.onResize);
     removeEventListener('scroll', this.onScroll);
@@ -123,29 +135,34 @@ class ScrollTrigger extends Component {
   render() {
     const {
       children,
+      component,
     } = this.props;
 
-    return (
-      <div
-        {...omit(cleanProps(this.props), ['onProgress'])}
-        ref={(element) => {
+    return React.createElement(component, {
+        ...omit(cleanProps(this.props), ['onProgress']),
+        ref: (element) => {
           this.element = element;
-        }}
-      >
-        {children}
-      </div>
+        },
+      },
+      children,
     );
   }
 }
 
 ScrollTrigger.propTypes = {
+  component: PropTypes.node,
+  throttleResize: PropTypes.number,
+  throttleScroll: PropTypes.number,
   triggerOnLoad: PropTypes.bool,
   onEnter: PropTypes.func,
   onExit: PropTypes.func,
   onProgress: PropTypes.func,
 };
 
 ScrollTrigger.defaultProps = {
+  component: 'div',
+  throttleResize: 100,
+  throttleScroll: 100,
   triggerOnLoad: true,
   onEnter: () => {},
   onExit: () => {},

tools/babel-preset.js

@@ -1,7 +1,7 @@
 const BABEL_ENV = process.env.BABEL_ENV;
 const building = BABEL_ENV != undefined && BABEL_ENV !== 'cjs';
 
-const plugins = [];
+const plugins = ['transform-object-rest-spread'];
 
 if (BABEL_ENV === 'umd') {
   plugins.push('external-helpers');