From f29d9316ff736f5edc27b4163cae7dcbed624e01 Mon Sep 17 00:00:00 2001 From: Camron Flanders Date: Thu, 25 Oct 2018 23:42:07 -0500 Subject: [PATCH 1/4] Add ability to debounce window resize updates This allows a user to pass a debounceMs when calling useWindowSize in order to debounce the window resize events --- example.js | 16 ++++++---- index.js | 50 ++++++++++++++++++-------------- package.json | 82 ++++++++++++++++++++++++++-------------------------- 3 files changed, 80 insertions(+), 68 deletions(-) diff --git a/example.js b/example.js index 62d641b..b05f6f8 100644 --- a/example.js +++ b/example.js @@ -1,10 +1,14 @@ -import React from 'react'; -import { render } from 'react-dom'; -import useWindowWidth from './'; +import React from 'react' +import { render } from 'react-dom' +import useWindowWidth from './' function App() { - let windowWidth = useWindowWidth(); - return 
{JSON.stringify(windowWidth)}
; + let debouncedWindowWidth = useWindowWidth(500) + let windowWidth = useWindowWidth() + return [ + 
Debounced: {JSON.stringify(debouncedWindowWidth)}
, + 
Firehose: {JSON.stringify(windowWidth)}
, + ] } -render(, window.root); +render(, window.root) diff --git a/index.js b/index.js index effa201..23425af 100644 --- a/index.js +++ b/index.js @@ -1,30 +1,38 @@ -'use strict'; -let { useState, useEffect } = require('react'); +'use strict' +let { useState, useEffect } = require('react') function getSize() { - return { - innerHeight: window.innerHeight, - innerWidth: window.innerWidth, - outerHeight: window.outerHeight, - outerWidth: window.outerWidth, - }; + return { + innerHeight: window.innerHeight, + innerWidth: window.innerWidth, + outerHeight: window.outerHeight, + outerWidth: window.outerWidth, + } } -function useWindowSize() { - let [windowSize, setWindowSize] = useState(getSize()); +function useWindowSize(debounceMs) { + let [windowSize, setWindowSize] = useState(getSize()) - function handleResize() { - setWindowSize(getSize()); - } + let timeoutId - useEffect(() => { - window.addEventListener('resize', handleResize); - return () => { - window.removeEventListener('resize', handleResize); - }; - }, []); + function handleResize() { + if (timeoutId) { + clearTimeout(timeoutId) + } - return windowSize; + timeoutId = setTimeout(function() { + setWindowSize(getSize()) + }, debounceMs) + } + + useEffect(() => { + window.addEventListener('resize', handleResize) + return () => { + window.removeEventListener('resize', handleResize) + } + }, []) + + return windowSize } -module.exports = useWindowSize; +module.exports = useWindowSize diff --git a/package.json b/package.json index 7d0e966..c6c79aa 100644 --- a/package.json +++ b/package.json @@ -1,42 +1,42 @@ { - "name": "@rehooks/window-size", - "version": "1.0.2", - "description": "React hook for subscribing to window size", - "main": "index.js", - "repository": "https://github.com/rehooks/window-size", - "author": "Jamie Kyle ", - "license": "MIT", - "publishConfig": { - "access": "public" - }, - "keywords": [ - "react", - "hooks", - "window", - "browser", - "size" - ], - "files": [ - "index.*" - ], - "scripts": { - "test": "ava test.js", - "example": "parcel example.html" - }, - "dependencies": { - "react": "^16.7.0-alpha.0" - }, - "devDependencies": { - "ava": "^0.25.0", - "browser-env": "^3.2.5", - "parcel": "^1.10.3", - "raf": "^3.4.0", - "react-dom": "^16.7.0-alpha.0", - "react-test-renderer": "^16.7.0-alpha.0" - }, - "ava": { - "require": [ - "./test-setup.js" - ] - } -} + "name": "@rehooks/window-size", + "version": "1.0.2", + "description": "React hook for subscribing to window size", + "main": "index.js", + "repository": "https://github.com/rehooks/window-size", + "author": "Jamie Kyle ", + "license": "MIT", + "publishConfig": { + "access": "public" + }, + "keywords": [ + "react", + "hooks", + "window", + "browser", + "size" + ], + "files": [ + "index.*" + ], + "scripts": { + "test": "ava test.js", + "example": "parcel example.html" + }, + "dependencies": { + "react": "^16.7.0-alpha.0" + }, + "devDependencies": { + "ava": "^0.25.0", + "browser-env": "^3.2.5", + "parcel": "^1.10.3", + "raf": "^3.4.0", + "react-dom": "^16.7.0-alpha.0", + "react-test-renderer": "^16.7.0-alpha.0" + }, + "ava": { + "require": [ + "./test-setup.js" + ] + } +} \ No newline at end of file From a800f36ae862d36dcd65b8c3da7cce9c81d20f0c Mon Sep 17 00:00:00 2001 From: Camron Flanders Date: Fri, 26 Oct 2018 14:02:40 -0500 Subject: [PATCH 2/4] fix formatting --- example.js | 20 ++++++++++---------- index.js | 52 ++++++++++++++++++++++++++-------------------------- package.json | 18 ++++-------------- 3 files changed, 40 insertions(+), 50 deletions(-) diff --git a/example.js b/example.js index b05f6f8..4603ed4 100644 --- a/example.js +++ b/example.js @@ -1,14 +1,14 @@ -import React from 'react' -import { render } from 'react-dom' -import useWindowWidth from './' +import React from 'react'; +import { render } from 'react-dom'; +import useWindowWidth from './'; function App() { - let debouncedWindowWidth = useWindowWidth(500) - let windowWidth = useWindowWidth() - return [ - 
Debounced: {JSON.stringify(debouncedWindowWidth)}
, - 
Firehose: {JSON.stringify(windowWidth)}
, - ] + let debouncedWindowWidth = useWindowWidth(500); + let windowWidth = useWindowWidth(); + return [ + 
Debounced: {JSON.stringify(debouncedWindowWidth)}
, + 
Firehose: {JSON.stringify(windowWidth)}
, + ]; } -render(, window.root) +render(, window.root); diff --git a/index.js b/index.js index 23425af..718d3e8 100644 --- a/index.js +++ b/index.js @@ -1,38 +1,38 @@ 'use strict' -let { useState, useEffect } = require('react') +let { useState, useEffect } = require('react'); function getSize() { - return { - innerHeight: window.innerHeight, - innerWidth: window.innerWidth, - outerHeight: window.outerHeight, - outerWidth: window.outerWidth, - } -} + return { + innerHeight: window.innerHeight, + innerWidth: window.innerWidth, + outerHeight: window.outerHeight, + outerWidth: window.outerWidth, + }; +}; function useWindowSize(debounceMs) { - let [windowSize, setWindowSize] = useState(getSize()) + let [windowSize, setWindowSize] = useState(getSize()); - let timeoutId + let timeoutId; - function handleResize() { - if (timeoutId) { - clearTimeout(timeoutId) - } + function handleResize() { + if (timeoutId) { + clearTimeout(timeoutId); + } - timeoutId = setTimeout(function() { - setWindowSize(getSize()) - }, debounceMs) - } + timeoutId = setTimeout(function() { + setWindowSize(getSize()); + }, debounceMs); + } - useEffect(() => { - window.addEventListener('resize', handleResize) - return () => { - window.removeEventListener('resize', handleResize) - } - }, []) + useEffect(() => { + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); - return windowSize + return windowSize; } -module.exports = useWindowSize +module.exports = useWindowSize; diff --git a/package.json b/package.json index c6c79aa..6c53edf 100644 --- a/package.json +++ b/package.json @@ -9,16 +9,8 @@ "publishConfig": { "access": "public" }, - "keywords": [ - "react", - "hooks", - "window", - "browser", - "size" - ], - "files": [ - "index.*" - ], + "keywords": ["react", "hooks", "window", "browser", "size"], + "files": ["index.*"], "scripts": { "test": "ava test.js", "example": "parcel example.html" @@ -35,8 +27,6 @@ "react-test-renderer": "^16.7.0-alpha.0" }, "ava": { - "require": [ - "./test-setup.js" - ] + "require": ["./test-setup.js"] } -} \ No newline at end of file +} From 5ce1a9b9733d7eb0c9bf31e91e3312af02dff37d Mon Sep 17 00:00:00 2001 From: Camron Flanders Date: Fri, 26 Oct 2018 14:12:45 -0500 Subject: [PATCH 3/4] fix formatting --- example.js | 12 +++++------ index.js | 46 ++++++++++++++++++++-------------------- package.json | 60 ++++++++++++++++++++++++++-------------------------- 3 files changed, 59 insertions(+), 59 deletions(-) diff --git a/example.js b/example.js index 4603ed4..a7380c9 100644 --- a/example.js +++ b/example.js @@ -3,12 +3,12 @@ import { render } from 'react-dom'; import useWindowWidth from './'; function App() { - let debouncedWindowWidth = useWindowWidth(500); - let windowWidth = useWindowWidth(); - return [ - 
Debounced: {JSON.stringify(debouncedWindowWidth)}
, - 
Firehose: {JSON.stringify(windowWidth)}
, - ]; + let debouncedWindowWidth = useWindowWidth(500); + let windowWidth = useWindowWidth(); + return [ + 
Debounced: {JSON.stringify(debouncedWindowWidth)}
, + 
Firehose: {JSON.stringify(windowWidth)}
, + ]; } render(, window.root); diff --git a/index.js b/index.js index 718d3e8..e266f6a 100644 --- a/index.js +++ b/index.js @@ -2,37 +2,37 @@ let { useState, useEffect } = require('react'); function getSize() { - return { - innerHeight: window.innerHeight, - innerWidth: window.innerWidth, - outerHeight: window.outerHeight, - outerWidth: window.outerWidth, - }; + return { + innerHeight: window.innerHeight, + innerWidth: window.innerWidth, + outerHeight: window.outerHeight, + outerWidth: window.outerWidth, + }; }; function useWindowSize(debounceMs) { - let [windowSize, setWindowSize] = useState(getSize()); + let [windowSize, setWindowSize] = useState(getSize()); - let timeoutId; + let timeoutId; - function handleResize() { - if (timeoutId) { - clearTimeout(timeoutId); - } + function handleResize() { + if (timeoutId) { + clearTimeout(timeoutId); + } - timeoutId = setTimeout(function() { - setWindowSize(getSize()); - }, debounceMs); - } + timeoutId = setTimeout(function() { + setWindowSize(getSize()); + }, debounceMs); + } - useEffect(() => { - window.addEventListener('resize', handleResize); - return () => { - window.removeEventListener('resize', handleResize); - }; - }, []); + useEffect(() => { + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); - return windowSize; + return windowSize; } module.exports = useWindowSize; diff --git a/package.json b/package.json index 6c53edf..196a3d2 100644 --- a/package.json +++ b/package.json @@ -1,32 +1,32 @@ { - "name": "@rehooks/window-size", - "version": "1.0.2", - "description": "React hook for subscribing to window size", - "main": "index.js", - "repository": "https://github.com/rehooks/window-size", - "author": "Jamie Kyle ", - "license": "MIT", - "publishConfig": { - "access": "public" - }, - "keywords": ["react", "hooks", "window", "browser", "size"], - "files": ["index.*"], - "scripts": { - "test": "ava test.js", - "example": "parcel example.html" - }, - "dependencies": { - "react": "^16.7.0-alpha.0" - }, - "devDependencies": { - "ava": "^0.25.0", - "browser-env": "^3.2.5", - "parcel": "^1.10.3", - "raf": "^3.4.0", - "react-dom": "^16.7.0-alpha.0", - "react-test-renderer": "^16.7.0-alpha.0" - }, - "ava": { - "require": ["./test-setup.js"] - } + "name": "@rehooks/window-size", + "version": "1.0.2", + "description": "React hook for subscribing to window size", + "main": "index.js", + "repository": "https://github.com/rehooks/window-size", + "author": "Jamie Kyle ", + "license": "MIT", + "publishConfig": { + "access": "public" + }, + "keywords": ["react", "hooks", "window", "browser", "size"], + "files": ["index.*"], + "scripts": { + "test": "ava test.js", + "example": "parcel example.html" + }, + "dependencies": { + "react": "^16.7.0-alpha.0" + }, + "devDependencies": { + "ava": "^0.25.0", + "browser-env": "^3.2.5", + "parcel": "^1.10.3", + "raf": "^3.4.0", + "react-dom": "^16.7.0-alpha.0", + "react-test-renderer": "^16.7.0-alpha.0" + }, + "ava": { + "require": ["./test-setup.js"] + } } From c55cac938983a3301561780a3d580dc2d18aa673 Mon Sep 17 00:00:00 2001 From: Camron Flanders Date: Fri, 26 Oct 2018 14:14:38 -0500 Subject: [PATCH 4/4] repair package.json formatting --- package.json | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 196a3d2..42a755c 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,16 @@ "publishConfig": { "access": "public" }, - "keywords": ["react", "hooks", "window", "browser", "size"], - "files": ["index.*"], + "keywords": [ + "react", + "hooks", + "window", + "browser", + "size" + ], + "files": [ + "index.*" + ], "scripts": { "test": "ava test.js", "example": "parcel example.html" @@ -27,6 +35,8 @@ "react-test-renderer": "^16.7.0-alpha.0" }, "ava": { - "require": ["./test-setup.js"] + "require": [ + "./test-setup.js" + ] } -} +} \ No newline at end of file