diff --git a/.babelrc b/.babelrc deleted file mode 100644 index dad59eb..0000000 --- a/.babelrc +++ /dev/null @@ -1,13 +0,0 @@ -{ - "presets": [ - ["latest", { - "es2015": { - "modules": false - } - }], - "react" - ], - "plugins": [ - "transform-object-rest-spread" - ], -} diff --git a/README.md b/README.md index bf73c46..278a28a 100644 --- a/README.md +++ b/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 `
` 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) => {}` diff --git a/package-lock.json b/package-lock.json index d9d0c38..12650bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3534,16 +3534,16 @@ "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=", "dev": true }, - "lodash.omit": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz", - "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=" - }, "lodash.throttle": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=" }, + "lomit": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/lomit/-/lomit-0.1.1.tgz", + "integrity": "sha512-1WmzTB6ujYBYbVbsfy7jnQ9Tu9odzeB0m9Ijx//b6aKYS6KqaeWJVRl6XHVrczz8W76A0O239UJKsVirKzIIGg==" + }, "longest": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", @@ -4329,12 +4329,12 @@ } }, "rollup-plugin-commonjs": { - "version": "8.2.6", - "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.2.6.tgz", - "integrity": "sha512-qK0+uhktmnAgZkHkqFuajNmPw93fjrO7+CysDaxWE5jrUR9XSlSvuao5ZJP+XizxA8weakhgYYBtbVz9SGBpjA==", + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.3.0.tgz", + "integrity": "sha512-PYs3OiYgENFYEmI3vOEm5nrp3eY90YZqd5vGmQqeXmhJsAWFIrFdROCvOasqJ1HgeTvqyYo9IGXnFDyoboNcgQ==", "dev": true, "requires": { - "acorn": "5.3.0", + "acorn": "5.4.1", "estree-walker": "0.5.1", "magic-string": "0.22.4", "resolve": "1.5.0", @@ -4342,9 +4342,9 @@ }, "dependencies": { "acorn": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.3.0.tgz", - "integrity": "sha512-Yej+zOJ1Dm/IMZzzj78OntP/r3zHEaKcyNoU2lAaxPtrseM6rF0xwqoz5Q5ysAiED9hTjI2hgtvLXitlCN1/Ug==", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.4.1.tgz", + "integrity": "sha512-XLmq3H/BVvW6/GbxKryGxWORz1ebilSsUDlyC27bXhWGWAZWkGwS6FLHjOlwFXNFoWFQEO/Df4u0YYd0K3BQgQ==", "dev": true }, "estree-walker": { @@ -4401,12 +4401,11 @@ } }, "rollup-plugin-node-resolve": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.0.0.tgz", - "integrity": "sha1-i4l8TDAw1QASd7BRSyXSygloPuA=", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.0.2.tgz", + "integrity": "sha512-ZwmMip/yqw6cmDQJuCQJ1G7gw2z11iGUtQNFYrFZHmqadRHU+OZGC3nOXwXu+UTvcm5lzDspB1EYWrkTgPWybw==", "dev": true, "requires": { - "browser-resolve": "1.11.2", "builtin-modules": "1.1.1", "is-module": "1.0.0", "resolve": "1.5.0" diff --git a/package.json b/package.json index 24f6ab5..eae2bec 100644 --- a/package.json +++ b/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" }, diff --git a/src/index.js b/src/index.js index 1b01577..820ee04 100644 --- a/src/index.js +++ b/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,22 +135,24 @@ class ScrollTrigger extends Component { render() { const { children, + component, } = this.props; - return ( -
{ + return React.createElement(component, { + ...omit(cleanProps(this.props), ['onProgress']), + ref: (element) => { this.element = element; - }} - > - {children} -
+ }, + }, + children, ); } } ScrollTrigger.propTypes = { + component: PropTypes.node, + throttleResize: PropTypes.number, + throttleScroll: PropTypes.number, triggerOnLoad: PropTypes.bool, onEnter: PropTypes.func, onExit: PropTypes.func, @@ -146,6 +160,9 @@ ScrollTrigger.propTypes = { }; ScrollTrigger.defaultProps = { + component: 'div', + throttleResize: 100, + throttleScroll: 100, triggerOnLoad: true, onEnter: () => {}, onExit: () => {}, diff --git a/tools/babel-preset.js b/tools/babel-preset.js index 3f9ca75..7925b94 100644 --- a/tools/babel-preset.js +++ b/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');