├── .gitignore ├── README.md ├── index.js ├── lib ├── on-resize.js ├── on-scroll.js └── on-unload.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-window-mixins 2 | 3 | React mixins for working with browser window events. 4 | 5 | Both mixins are throttled not to hang your browser. 6 | 7 | ## Install 8 | 9 | `npm install react-window-mixins` 10 | 11 | ## OnResize 12 | 13 | Useful for calculating sizes for more complicated layouts, handling changes for for responsive layouts (sadly not everything is possible via CSS), etc... 14 | 15 | ```javascript 16 | var OnResize = require("react-window-mixins").OnResize; 17 | 18 | React.createClass({ 19 | mixins: [ OnResize ], 20 | 21 | render: function() { 22 | return React.DOM.div( 23 | null, 24 | "current window size: " + this.state.window.width + ", " + this.state.window.height, 25 | "current document size: " + this.state.document.width + ", " + this.state.document.height 26 | ); 27 | } 28 | }); 29 | ``` 30 | 31 | You can also write your own `onResize` handler: 32 | 33 | ```javascript 34 | var OnResize = require("react-window-mixins").OnResize; 35 | 36 | React.createClass({ 37 | mixins: [ OnResize ], 38 | 39 | onResize: function() { 40 | this.setState({ 41 | componentWidth: this.getDOMNode().clientWidth 42 | }); 43 | }, 44 | 45 | render: function() { 46 | return React.DOM.div( 47 | null, 48 | "current component width: " + this.state.componentWidth 49 | ); 50 | } 51 | }); 52 | ``` 53 | 54 | ## OnScroll 55 | 56 | Useful for elements interacting with scroll position, and even writing parallax websites with React. 57 | 58 | ```javascript 59 | var OnScroll = require("react-window-mixins").OnScroll; 60 | 61 | React.createClass({ 62 | mixins: [ OnScroll ], 63 | 64 | render: function() { 65 | return React.DOM.div( 66 | null, 67 | "current scroll offset: " + this.state.scroll.x + ", " + this.state.scroll.y 68 | ); 69 | } 70 | }); 71 | ``` 72 | 73 | You can also write your own `onScroll` handler: 74 | 75 | ```javascript 76 | var OnScroll = require("react-window-mixins").OnScroll; 77 | 78 | React.createClass({ 79 | mixins: [ OnScroll ], 80 | 81 | onScroll: function() { 82 | this.setState({ 83 | scrollPosition: window.pageYOffset - this.getDOMNode().offsetTop 84 | }); 85 | }, 86 | 87 | render: function() { 88 | return React.DOM.div( 89 | null, 90 | "current component scroll offset: " + this.state.scrollPosition 91 | ); 92 | } 93 | }); 94 | ``` 95 | 96 | ## OnUnload 97 | 98 | Useful for defining handlers for the `unload` and `beforeunload` events. Event 99 | handlers are only added to the `window` if they are defined. No default handlers 100 | are added automatically. 101 | 102 | ```javascript 103 | var OnUnload = require("react-window-mixins").OnUnload; 104 | 105 | React.createClass({ 106 | mixins: [ OnUnload ], 107 | 108 | onUnload: function() { 109 | // Clean up any resources 110 | }, 111 | 112 | onBeforeUnload: function() { 113 | return 'Are you sure you want to leave the page?'; 114 | } 115 | }); 116 | ``` 117 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | OnResize: require("./lib/on-resize"), 3 | OnScroll: require("./lib/on-scroll"), 4 | OnUnload: require("./lib/on-unload") 5 | }; 6 | 7 | -------------------------------------------------------------------------------- /lib/on-resize.js: -------------------------------------------------------------------------------- 1 | /*global window */ 2 | 3 | var throttle = require("lodash.throttle"); 4 | 5 | module.exports = { 6 | getInitialState: function() { 7 | var defaults = { window: { height: 0, width: 0 }, document: { height: 0, width: 0 } }; 8 | return !this.onResize ? defaults : null; 9 | }, 10 | 11 | componentWillMount: function() { 12 | if (!this.onResize) { 13 | this.onResize = function() { 14 | this.setState({ 15 | window: { height: window.innerHeight, width: window.innerWidth }, 16 | document: { height: document.body.clientHeight, width: document.body.clientWidth } 17 | }); 18 | }.bind(this); 19 | } 20 | 21 | this.onResize(); 22 | }, 23 | 24 | componentDidMount: function() { 25 | this.onResizeThrottled = throttle(this.onResize, 10); 26 | window.addEventListener("resize", this.onResizeThrottled); 27 | }, 28 | 29 | componentWillUnmount: function() { 30 | window.removeEventListener("resize", this.onResizeThrottled); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /lib/on-scroll.js: -------------------------------------------------------------------------------- 1 | /*global window */ 2 | 3 | var throttle = require("lodash.throttle"); 4 | 5 | module.exports = { 6 | getInitialState: function() { 7 | return !this.onScroll ? { scroll: { x: 0, y: 0 } } : null; 8 | }, 9 | 10 | componentDidMount: function() { 11 | if (!this.onScroll) { 12 | this.onScroll = function() { 13 | this.setState({ scroll: { x: window.pageXOffset, y: window.pageYOffset } }); 14 | }.bind(this); 15 | } 16 | 17 | this.onScroll(); 18 | this.onScrollThrottled = throttle(this.onScroll, 10); 19 | window.addEventListener("scroll", this.onScrollThrottled); 20 | }, 21 | 22 | componentWillUnmount: function() { 23 | window.removeEventListener("scroll", this.onScrollThrottled); 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /lib/on-unload.js: -------------------------------------------------------------------------------- 1 | /*global window */ 2 | 3 | module.exports = { 4 | componentDidMount: function() { 5 | if (this.onUnload) { 6 | window.addEventListener("unload", this.onUnload); 7 | } 8 | if (this.onBeforeUnload) { 9 | window.addEventListener("beforeunload", this.onBeforeUnload); 10 | } 11 | }, 12 | 13 | componentWillUnmount: function() { 14 | if (this.onUnload) { 15 | window.removeEventListener("unload", this.onUnload); 16 | } 17 | if (this.onBeforeUnload) { 18 | window.removeEventListener("beforeunload", this.onBeforeUnload); 19 | } 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-window-mixins", 3 | "version": "0.0.6", 4 | "description": "React mixins for working with browser window events.", 5 | "keywords": [ 6 | "react", 7 | "react-mixin", 8 | "browser", 9 | "events" 10 | ], 11 | "homepage": "https://github.com/szymonkaliski/react-window-mixins", 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/szymonkaliski/react-window-mixins.git" 15 | }, 16 | "main": "index.js", 17 | "author": "Szymon Kaliski ", 18 | "license": "ISC", 19 | "dependencies": { 20 | "lodash.throttle": "^2.4.1" 21 | } 22 | } 23 | --------------------------------------------------------------------------------