1.1.0 / 1.1.1

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .DS_Store
 yarn-error.log
+.rpt2_cache

.npmignore

@@ -1,10 +1,9 @@
 src
 
 tsconfig.json
-.travis.yml
 .prettierrc
 
 .eslintrc.js
-/index.d.ts
-webpack.config.js
+rollup.config.js
 yarn-error.log
+.rpt2_cache

CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-viewport-hooks Changelog
 
+## 1.1.0 / 1.1.1 (2019-08-13)
+#### Bug Fix
+- fixed `window id undefined` error in SSR apps
+
+#### Repository Changes
+- added ES module
+
 ## 1.0.1 / 1.0.2 (2019-08-05)
 #### New Feature
 - `useViewport` hook

README.md

@@ -36,7 +36,7 @@ Name | Type | Description
 
 ## Example
 ```js
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useViewport } from 'react-viewport-hooks';
 
 const App = () => {

lib/index.d.ts

@@ -1,6 +1,6 @@
-export declare const useViewport: (options?: {
-    updateOnResize: boolean;
-}) => {
-    vw: number;
-    vh: number;
-};
+export declare const useViewport: (options?: {
+    updateOnResize: boolean;
+}) => {
+    vw: number;
+    vh: number;
+};

package.json

@@ -1,17 +1,16 @@
 {
   "name": "react-viewport-hooks",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "Get real viewport width & height",
   "author": "Jakub Biesiada",
   "license": "MIT",
-  "main": "lib/react-viewport-hooks.min.js",
+  "main": "lib/react-viewport-hooks.cjs.js",
+  "module": "lib/react-viewport-hooks.esm.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "release": "npm run prettier && npm run lint && npm run build:dev && npm run build",
-    "build": "webpack --env build",
-    "build:dev": "webpack --env dev",
+    "release": "rimraf lib/* && npm run prettier && npm run lint && npm run build",
+    "build": "rollup -c",
     "watch": "npm run build -- --watch",
-    "watch:dev": "npm run build:dev -- --watch",
     "lint": "eslint 'src/**/*.tsx' --fix",
     "prettier": "prettier --write 'src/**/*.tsx'"
   },
@@ -30,21 +29,21 @@
   },
   "homepage": "https://github.com/JB1905/react-viewport-hooks#readme",
   "devDependencies": {
-    "@types/react": "^16.8.24",
+    "@types/react": "^16.9.1",
     "@typescript-eslint/parser": "^1.13.0",
     "eslint": "^6.1.0",
     "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
-    "eslint-plugin-react-hooks": "^1.6.1",
-    "husky": "^3.0.2",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "husky": "^3.0.3",
     "lint-staged": "^9.2.1",
     "prettier": "^1.18.2",
-    "react": "^16.8.6",
-    "ts-loader": "^6.0.4",
-    "typescript": "^3.5.3",
-    "webpack": "^4.39.1",
-    "webpack-cli": "^3.3.6"
+    "react": "^16.9.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^5.1.1",
+    "rollup-plugin-typescript2": "^0.22.1",
+    "typescript": "^3.5.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0"

rollup.config.js

@@ -0,0 +1,23 @@
+import resolve from 'rollup-plugin-node-resolve';
+import typescript from 'rollup-plugin-typescript2';
+import { terser } from 'rollup-plugin-terser';
+
+import pkg from './package.json';
+
+export default {
+  input: 'src/index.tsx',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+      sourcemap: true
+    },
+    {
+      file: pkg.module,
+      format: 'es',
+      sourcemap: true
+    }
+  ],
+  plugins: [resolve(), typescript(), terser()],
+  external: Object.keys(pkg.peerDependencies)
+};

src/index.tsx

@@ -5,22 +5,26 @@ const defaultOptions = {
 };
 
 export const useViewport = (options = defaultOptions) => {
-  const [vw, setVW] = useState(window.innerWidth);
-  const [vh, setVH] = useState(window.innerHeight);
+  const [vw, setVW] = useState(0);
+  const [vh, setVH] = useState(0);
 
   const { updateOnResize } = options;
 
   useEffect(() => {
+    const setSizes = () => {
+      if (window.innerWidth !== vw) {
+        setVW(window.innerWidth);
+      }
+
+      if (window.innerHeight !== vh) {
+        setVH(window.innerHeight);
+      }
+    };
+
+    setSizes();
+
     if (updateOnResize) {
-      window.addEventListener('resize', () => {
-        if (window.innerWidth !== vw) {
-          setVW(window.innerWidth);
-        }
-
-        if (window.innerHeight !== vh) {
-          setVH(window.innerHeight);
-        }
-      });
+      window.addEventListener('resize', setSizes);
     }
   }, [updateOnResize, vh, vw]);
 

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es6",
-    "module": "commonjs",
+    "target": "es5",
+    "module": "esnext",
     "checkJs": false,
     "declaration": true,
     "jsx": "react",