chore: rename variables

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run pre-commit

.npmignore

@@ -1,11 +1,10 @@
 src
 __tests__
 coverage
-
+.husky
 tsconfig.json
 .travis.yml
 .prettierrc
-
 .eslintrc.js
 rollup.config.js
 yarn-error.log

CHANGELOG.md

@@ -2,67 +2,67 @@
 
 ## 1.5.0 (2020-06-01)
 
-#### Bug Fix
+### Bug Fix
 
 - fixed incorrect options merging
 - fixed default value type
 
 ## 1.4.0 (2020-05-25)
 
-#### Breaking Changes
+### Breaking Changes
 
 - updated `withViewport` params order
 
 ## 1.3.0 (2020-04-14)
 
-#### Breaking Changes
+### Breaking Changes
 
 - removed default values for `vw` & `vh`
 
-#### New Feature
+### New Feature
 
 - added options to set default values for `vw` & `vh`
 
 ## 1.2.2 (2020-02-23)
 
-#### Bug Fix
+### Bug Fix
 
 - fixed `WrappedComponent` type
 
-#### Repository Changes
+### Repository Changes
 
 - added tests
 
 ## 1.2.0 beta 2 / 1.2.0 beta 3 / 1.2.0 / 1.2.1 (2020-02-11)
 
-#### Bug Fix
+### Bug Fix
 
 - added missing `options` prop to HOC
 
 ## 1.2.0 beta 1 (2020-02-11)
 
-#### New Feature
+### New Feature
 
 - added `withViewport` HOC
 
 ## 1.1.2 beta 1 / 1.1.2 (2020-02-01)
 
-#### Improvement
+### Improvement
 
 - added event listener cleanup after resize
 
 ## 1.1.0 / 1.1.1 (2019-08-13)
 
-#### Bug Fix
+### Bug Fix
 
 - fixed `window id undefined` error in SSR apps
 
-#### Repository Changes
+### Repository Changes
 
 - added ES module
 
 ## 1.0.1 / 1.0.2 (2019-08-05)
 
-#### New Feature
+### New Feature
 
 - added `useViewport` hook

README.md

@@ -1,15 +1,22 @@
-# [react-viewport-hooks](https://github.com/jb1905/react-viewport-hooks)
+# [react-viewport-hooks](https://github.com/cool-hooks/react-viewport-hooks)
 
 [![NPM version](https://img.shields.io/npm/v/react-viewport-hooks?style=flat-square)](https://www.npmjs.com/package/react-viewport-hooks)
 [![NPM downloads](https://img.shields.io/npm/dm/react-viewport-hooks?style=flat-square)](https://www.npmjs.com/package/react-viewport-hooks)
 [![NPM license](https://img.shields.io/npm/l/react-viewport-hooks?style=flat-square)](https://www.npmjs.com/package/react-viewport-hooks)
-[![Codecov](https://img.shields.io/codecov/c/github/JB1905/react-viewport-hooks?style=flat-square)](https://codecov.io/gh/cool-hooks/react-viewport-hooks)
-[![Travis](https://img.shields.io/travis/cool-hooks/react-viewport-hooks/master?style=flat-square)](https://travis-ci.org/cool-hooks/react-viewport-hooks)
+[![Codecov](https://img.shields.io/codecov/c/github/cool-hooks/react-viewport-hooks?style=flat-square)](https://codecov.io/gh/cool-hooks/react-viewport-hooks)
+[![Travis](https://img.shields.io/travis/com/cool-hooks/react-viewport-hooks/main?style=flat-square)](https://app.travis-ci.com/github/cool-hooks/react-viewport-hooks)
 [![Bundle size](https://img.shields.io/bundlephobia/min/react-viewport-hooks?style=flat-square)](https://bundlephobia.com/result?p=react-viewport-hooks)
 
 ## About
 
-Get real viewport width & height
+Get the real width & height of the window
+
+### Demo
+
+Play with the library in CodeSandbox
+
+- [hooks](https://codesandbox.io/s/hooks-demo-m8qxm)
+- [HOC](https://codesandbox.io/s/hoc-demo-9998s)
 
 ## How to Install
 
@@ -27,34 +34,36 @@ $ yarn add react-viewport-hooks
 
 ## Getting Started
 
-#### Options
+### Options
 
-| Name               | Type    | Default     | Description                     |
-| ------------------ | ------- | ----------- | ------------------------------- |
-| **updateOnResize** | boolean | `true`      | Update sizes on window resize   |
-| **defaultVW**      | number  | `undefined` | Fallback for default `vw` value |
-| **defaultVH**      | number  | `undefined` | Fallback for default `vh` value |
+| Name               | Type    | Default     | Description                               |
+| ------------------ | ------- | ----------- | ----------------------------------------- |
+| **updateOnResize** | boolean | `true`      | Update the sizes when resizing the window |
+| **defaultVw**      | number  | `undefined` | Fallback for the default `vw` value       |
+| **defaultVh**      | number  | `undefined` | Fallback for the default `vh` value       |
 
-#### Returned Values
+### Returned Values
 
-| Name   | Type   | Description            |
-| ------ | ------ | ---------------------- |
-| **vw** | number | Window viewport width  |
-| **vh** | number | Window viewport height |
+| Name   | Type   | Description                   |
+| ------ | ------ | ----------------------------- |
+| **vw** | number | Width of the window viewport  |
+| **vh** | number | Height of the window viewport |
 
-#### Example
+### Example
 
 **`useViewport` hook:**
 
 ```js
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useViewport } from 'react-viewport-hooks';
 
 const App = () => {
   const { vw, vh } = useViewport(/* object with options (if needed) */);
 
-  document.documentElement.style.setProperty('--vw', `${vw}px`);
-  document.documentElement.style.setProperty('--vh', `${vh}px`);
+  useEffect(() => {
+    document.documentElement.style.setProperty('--vw', `${vw}px`);
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+  }, [vw, vh]);
 
   return <h1>Hello Viewport!</h1>;
 };
@@ -65,12 +74,14 @@ export default App;
 **`withViewport` HOC:**
 
 ```js
-import React from 'react';
+import React, { useEffect } from 'react';
 import { withViewport } from 'react-viewport-hooks';
 
 const App = ({ vw, vh }) => {
-  document.documentElement.style.setProperty('--vw', `${vw}px`);
-  document.documentElement.style.setProperty('--vh', `${vh}px`);
+  useEffect(() => {
+    document.documentElement.style.setProperty('--vw', `${vw}px`);
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+  }, [vw, vh]);
 
   return <h1>Hello Viewport!</h1>;
 };

__tests__/useViewport.test.ts

@@ -30,7 +30,7 @@ describe('useViewport', () => {
     [{}, 500, 300],
     [{ updateOnResize: false }, 1024, 768],
   ])(
-    'should return $resultVw and $resultVh as new vw and vh values',
+    'should return $resultVw and $resultVh as new values ​​for vw and vh',
     (options, resultVw, resultVh) => {
       const { result } = renderHook(() => useViewport(options));
 

__tests__/withViewport.test.tsx

@@ -3,7 +3,10 @@ import { render } from '@testing-library/react';
 
 import { withViewport } from '../src';
 
-import { Sizes } from '../src/interfaces/sizes';
+interface Sizes {
+  readonly vw: number;
+  readonly vh: number;
+}
 
 const checkResult = ({ vw, vh }: Sizes) => {
   expect(vw).toBe(1024);
@@ -31,7 +34,10 @@ describe('withViewport usage with class component', () => {
     }
   }
 
-  const ClassComponentHOC = withViewport()(ClassComponent);
+  const ClassComponentHOC = withViewport({
+    defaultVw: 320,
+    defaultVh: 560,
+  })(ClassComponent);
 
   it('should render vw and wh values', () => {
     render(<ClassComponentHOC />);

package.json

@@ -1,23 +1,26 @@
 {
   "name": "react-viewport-hooks",
   "version": "1.5.0",
-  "description": "Get real viewport width & height",
+  "description": "Get the real width & height of the window",
   "author": "Jakub Biesiada",
   "license": "MIT",
   "main": "lib/react-viewport-hooks.cjs.js",
   "module": "lib/react-viewport-hooks.esm.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "prepack": "npm run clean && npm run prettier && npm run lint && npm run build",
+    "prepack": "npm run prettier && npm run lint && npm run build",
     "clean": "rimraf lib/*",
     "build": "rollup -c",
+    "prebuild": "npm run clean",
     "test": "jest --coverage",
     "watch": "npm run build -- --watch",
     "watch:test": "npm run test -- --watch",
     "lint": "eslint 'src/**/*.{tsx,ts}' --fix",
     "prettier": "prettier --write 'src/**/*.{tsx,ts}'",
     "commit": "git-cz",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "prepare": "husky install",
+    "pre-commit": "lint-staged"
   },
   "repository": {
     "type": "git",
@@ -26,41 +29,42 @@
   "keywords": [
     "react",
     "hooks",
+    "height",
     "viewport",
+    "window",
     "sizes",
-    "height",
-    "width",
-    "window"
+    "width"
   ],
   "bugs": {
     "url": "https://github.com/cool-hooks/react-viewport-hooks/issues"
   },
   "homepage": "https://github.com/cool-hooks/react-viewport-hooks#readme",
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^10.0.0",
-    "@testing-library/react": "^11.2.1",
-    "@testing-library/react-hooks": "^3.4.2",
-    "@types/jest": "^26.0.15",
-    "@types/react": "^16.9.56",
-    "@typescript-eslint/parser": "^4.8.1",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/jest": "^27.0.3",
+    "@types/react": "^17.0.38",
+    "@typescript-eslint/parser": "^5.8.0",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "^7.13.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^4.3.0",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.1",
-    "prettier": "^2.1.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-test-renderer": "^16.14.0",
+    "eslint": "^8.5.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^7.0.4",
+    "jest": "^27.4.5",
+    "lint-staged": "^12.1.4",
+    "prettier": "^2.5.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
+    "rollup": "^2.62.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.29.0",
-    "ts-jest": "^26.4.4",
-    "typescript": "^4.0.5",
-    "semantic-release": "^17.2.3"
+    "rollup-plugin-typescript2": "^0.31.1",
+    "semantic-release": "^18.0.1",
+    "ts-jest": "^27.1.2",
+    "typescript": "^4.5.4"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -71,15 +75,11 @@
     }
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "transform": {
       "^.+\\.tsx?$": "ts-jest"
     }
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "src/**/*.{tsx,ts}": [
       "npm run prettier",

rollup.config.js

@@ -19,5 +19,5 @@ export default {
     },
   ],
   plugins: [resolve(), typescript(), terser()],
-  external: Object.keys(pkg.peerDependencies),
+  external: Object.keys(pkg.peerDependencies || {}),
 };

src/interfaces/options.ts → src/types.ts

@@ -1,5 +1,5 @@
 export interface Options {
-  readonly defaultVW?: number;
-  readonly defaultVH?: number;
+  readonly defaultVw?: number;
+  readonly defaultVh?: number;
   readonly updateOnResize?: boolean;
 }