Default size

.travis.yml

@@ -6,7 +6,7 @@ addons:
 script:
   - yarn build
   - yarn test:build
-  - yarn test
+  - yarn test --singleRun
 deploy:
   provider: npm
   email: [email protected]

CHANGELOG.md

@@ -1,13 +1,24 @@
 # CHANGELOG
 
+## 4.0.0
+
+- Added option to pass default width and height. Useful when using the lib with
+  SSR. (Thanks [Simon Boudrias](https://github.com/SBoudrias) and
+  [Fokke Zandbergen](https://github.com/FokkeZB))
+- Dep upgrades
+- **[BREAKING]** Removed TS types. See:
+  - https://github.com/ZeeCoder/use-resize-observer/issues/12
+  - https://github.com/ZeeCoder/use-resize-observer/pull/13
+  - https://github.com/ZeeCoder/use-resize-observer/pull/8
+
 ## 3.1.0
 
 - Added Typescript types
 
 ## 3.0.0
 
-- **[BREAKING]** Requires React 16.8.0 or above, which is the first non-alpha release
-  that includes hooks
+- **[BREAKING]** Requires React 16.8.0 or above, which is the first non-alpha
+  release that includes hooks
 
 ## 2.0.1
 

README.md

@@ -11,7 +11,7 @@ A React hook that allows you to use a ResizeObserver to measure an element's siz
 
 ## Install
 
-```
+```sh
 yarn add use-resize-observer
 # or
 npm install --save use-resize-observer
@@ -34,6 +34,20 @@ const App = () => {
 };
 ```
 
+## SSR, Default Size
+
+You can set the default size, which is useful for SSR.
+
+```js
+const [ref, width, height] = useResizeObserver({
+  defaultWidth: 100,
+  defaultHeight: 50
+});
+
+// width / height will be 100 and 50 respectively, until the ResizeObserver
+// kicks in and reports the actual size.
+```
+
 ## Notes
 
 - Uses [resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill)

karma.conf.js

@@ -10,8 +10,6 @@ module.exports = function(config) {
     browsers,
     reporters: ["spec"],
 
-    singleRun: true,
-
     // Max concurrency for SauceLabs OS plan
     concurrency: 5,
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-resize-observer",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
   "repository": "[email protected]:ZeeCoder/use-resize-observer.git",
@@ -9,8 +9,10 @@
   "license": "MIT",
   "scripts": {
     "build": "rollup -c",
+    "watch": "rollup -c -w",
     "test": "karma start",
     "test:build": "parcel build tests/index.js --out-dir tests/dist",
+    "test:watch": "parcel watch tests/index.js --out-dir tests/dist",
     "prepublish": "yarn build"
   },
   "husky": {
@@ -36,18 +38,17 @@
     "@babel/preset-env": "^7.1.0",
     "babel-regenerator-runtime": "^6.5.0",
     "delay": "^4.1.0",
-    "husky": "^1.1.2",
-    "karma": "^3.1.3",
-    "karma-chrome-launcher": "^2.2.0",
+    "husky": "^3.0.1",
+    "karma": "^4.2.0",
+    "karma-chrome-launcher": "^3.0.0",
     "karma-jasmine": "^2.0.1",
     "karma-spec-reporter": "^0.0.32",
-    "lint-staged": "^7.3.0",
+    "lint-staged": "^9.2.0",
     "parcel-bundler": "^1.10.3",
     "prettier": "^1.14.3",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "rollup": "^0.66.6",
+    "rollup": "^1.17.0",
     "rollup-plugin-babel": "^4.0.3"
-  },
-  "types": "index.d.ts"
+  }
 }

src/index.js

@@ -1,10 +1,10 @@
 import { useEffect, useState, useRef } from "react";
 import ResizeObserver from "resize-observer-polyfill";
 
-export default function() {
-  const ref = useRef();
-  const [width, changeWidth] = useState(1);
-  const [height, changeHeight] = useState(1);
+export default function({ defaultWidth = 1, defaultHeight = 1 } = {}) {
+  const ref = useRef(null);
+  const [width, changeWidth] = useState(defaultWidth);
+  const [height, changeHeight] = useState(defaultHeight);
 
   useEffect(() => {
     const element = ref.current;

tests/index.js

@@ -8,13 +8,16 @@ import delay from "delay";
 // works while it might actually not, if you use the lib without babel-polyfill.
 import "babel-regenerator-runtime";
 
-const Observed = () => {
-  const [ref, width, height] = useResizeObserver();
+const Observed = ({ defaultWidth, defaultHeight, ...props }) => {
+  const [ref, width, height] = useResizeObserver({
+    defaultWidth: defaultWidth || 1,
+    defaultHeight: defaultHeight || 1
+  });
 
   return (
     <div
+      {...props}
       ref={ref}
-      id="observed"
       style={{
         position: "absolute",
         left: 0,
@@ -38,20 +41,35 @@ beforeAll(() => {
   app.style.height = "300px";
   document.body.appendChild(app);
 
-  ReactDOM.render(<Observed />, app);
+  ReactDOM.render(
+    <React.Fragment>
+      <Observed id="observed" />
+      <Observed
+        id="observed-with-defaults"
+        defaultWidth={24}
+        defaultHeight={42}
+      />
+    </React.Fragment>,
+    app
+  );
 
   global.app = app;
   global.observed = document.querySelector("#observed");
+  global.observedWithDefaults = document.querySelector(
+    "#observed-with-defaults"
+  );
 });
 
-it("should render with 1x1 initially, before the ResizeObserver is triggered", async () => {
+it("should render with the right defaults, before the ResizeObserver is triggered", async () => {
   expect(observed.textContent).toBe("1x1");
+  expect(observedWithDefaults.textContent).toBe("24x42");
 });
 
 it("should report the correct size after the size is reported by the ResizeObserver", async () => {
   await delay(100);
 
   expect(observed.textContent).toBe("200x300");
+  expect(observedWithDefaults.textContent).toBe("200x300");
 });
 
 it("should report following size changes", async () => {