Default size feature refactors

Author: ZeeCoder

.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

@@ -2,16 +2,8 @@
 
 ## 3.2.0
 
-- Added option to pass default width and height. This is useful when using this plugin on the SSR side.
-
-Demo:
-
-```js
-const DEFAULT_WIDTH = 1024;
-const DEFAULT_HEIGHT = 600;
-
-const [ref, width, height] = useResizeObserver(DEFAULT_WIDTH, DEFAULT_HEIGHT);
-```
+- Added option to pass default width and height. (Useful when using this plugin
+  on the SSR side.)
 
 ## 3.1.0
 

README.md

@@ -34,6 +34,19 @@ const App = () => {
 };
 ```
 
+## SSR, Default Size
+
+You can set the default custom 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.
+```
+
 ## 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

@@ -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": {

src/index.js

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

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 () => {