use-window-orientation - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.d.ts

@@ -0,0 +0,0 @@ declare type Orientation = "portrait" | "landscape";

dist/index.js

@@ -1,46 +0,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("react");
-var lodash_debounce_1 = __importDefault(require("lodash.debounce"));
-/**
- * React hook for using window orientation. Not _device_ orientation—this hook determines orientation based on the width and height of the window.
- * @param {OrientationOptions} [options] - The options object
- * @param {Orientation} [options.defaultOrientation=portrait] - The default orientation to return when there is no window
- * @returns {OrientationResults} An object containing the results of the orientation query in both string and boolean form
- */
-function useWindowOrientation(options) {
-    if (options === void 0) { options = {}; }
-    if (typeof options !== "object") {
-        throw new TypeError("The options argument must be formatted as an object.");
-    }
-    var _a = options.defaultOrientation, defaultOrientation = _a === void 0 ? "portrait" : _a;
-    if (defaultOrientation !== "portrait" && defaultOrientation !== "landscape") {
-        var isString = typeof defaultOrientation === "string";
-        throw new TypeError("" + (isString ? '"' : "") + defaultOrientation + (isString ? '"' : "") + " is not a valid defaultOrientation. Use \"portrait\" or \"landscape\".");
-    }
-    var _b = react_1.useState(defaultOrientation), orientation = _b[0], setOrientation = _b[1];
-    react_1.useEffect(function () {
-        function handleResize() {
-            if (window.innerWidth <= window.innerHeight) {
-                setOrientation("portrait");
-            }
-            else {
-                setOrientation("landscape");
-            }
-        }
-        handleResize();
-        window.addEventListener("resize", lodash_debounce_1.default(handleResize, 400));
-        return function () {
-            window.removeEventListener("resize", lodash_debounce_1.default(handleResize, 400));
-        };
-    }, []);
-    return {
-        orientation: orientation,
-        portrait: orientation === "portrait",
-        landscape: orientation === "landscape",
-    };
-}
-exports.default = useWindowOrientation;
+var e,t=require("react"),r=(e=require("lodash.debounce"))&&"object"==typeof e&&"default"in e?e.default:e;module.exports=function(e={}){if("object"!=typeof e)throw new TypeError("The options argument must be formatted as an object.");const{defaultOrientation:n="portrait"}=e;if("portrait"!==n&&"landscape"!==n){const e="string"==typeof n;throw new TypeError(`${e?'"':""}${n}${e?'"':""} is not a valid defaultOrientation. Use "portrait" or "landscape".`)}const[o,i]=t.useState(n);return t.useEffect(()=>{function e(){window.innerWidth<=window.innerHeight?i("portrait"):i("landscape")}return e(),window.addEventListener("resize",r(e,400)),()=>{window.removeEventListener("resize",r(e,400))}},[]),{orientation:o,portrait:"portrait"===o,landscape:"landscape"===o}};
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "use-window-orientation",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A React hook for using window orientation.",
@@ -8,3 +8,6 @@ "author": "Ty Mick <[e-mail]> (https://tymick.me)",
   "license": "Apache-2.0",
+  "source": "src/index.ts",
   "main": "dist/index.js",
+  "module": "dist/index.module.js",
+  "unpkg": "dist/index.umd.js",
   "types": "dist/index.d.ts",
@@ -14,8 +17,7 @@ "files": [
   ],
+  "sideEffects": false,
   "scripts": {
-    "build": "tsc",
-    "test": "npm run build && jest --verbose",
-    "preversion": "npm run test",
-    "version": "git add -A dist",
-    "postversion": "git push && git push --tags && npm publish"
+    "build": "microbundle",
+    "dev": "microbundle watch",
+    "test": "npm run build && jest --verbose"
   },
@@ -38,2 +40,3 @@ "peerDependencies": {
     "jest": "^26.2.2",
+    "microbundle": "^0.12.3",
     "prettier": "^2.0.5",
@@ -40,0 +43,0 @@ "react": "^16.8.0",

README.md

 # useWindowOrientation
 
-[![npm version](https://img.shields.io/npm/v/use-window-orientation)](https://npmjs.org/package/use-window-orientation "View this package on npm")
-[![npm peer dependency version](https://img.shields.io/npm/dependency-version/use-window-orientation/peer/react)](https://npmjs.org/package/use-window-orientation "View this package on npm")
-[![npm bundle size](https://img.shields.io/bundlephobia/min/use-window-orientation)](https://npmjs.org/package/use-window-orientation "View this package on npm")
+[![npm version](https://img.shields.io/npm/v/use-window-orientation)](https://www.npmjs.com/package/use-window-orientation "View this package on npm")
+[![npm peer dependency version](https://img.shields.io/npm/dependency-version/use-window-orientation/peer/react)](https://www.npmjs.com/package/use-window-orientation "View this package on npm")
+[![npm bundle size](https://img.shields.io/bundlephobia/min/use-window-orientation)](https://www.npmjs.com/package/use-window-orientation "View this package on npm")
 [![npm license](https://img.shields.io/npm/l/use-window-orientation)](/LICENSE)
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0-ff69b4.svg)](/CODE_OF_CONDUCT.md)
 
-1. **[Installation](#installation)**
-2. **[Usage](#usage)**
-3. **[Options](#options)**
-4. **[Caveats](#caveats)**
+- **[Installation](#installation)**
+- **[Usage](#usage)**
+- **[Options](#options)**
+- **[Caveats](#caveats)**
+- **[Contributing](#contributing)**
+- **[Related projects](#related-projects)**
 
@@ -70,2 +72,8 @@ Sometimes, just knowing [the window width](https://github.com/tywmick/use-window-width-breakpoints) isn't enough. Sometimes you want to know if the window's orientation is portrait or landscape. Good thing you found this React hook.
 
+```js
+const { orientation, portrait, landscape } = useWindowOrientation({
+  defaultOrientation: "portrait",
+});
+```
+
 <h2 id="caveats">Caveats</h2>
@@ -76,1 +84,36 @@
 Also, in the rare case that the window's width and height are equal, useWindowOrientation will just report the orientation as portrait.
+
+<h2 id="contributing">Contributing</h2>
+
+If you'd like to contribute to this project (which would be awesome), here's how to set it up:
+
+1. [Fork this repository](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo) to your own GitHub account.
+
+2. Clone it to your device.
+
+   ```sh
+   git clone https://github.com/YOUR_USERNAME/use-window-orientation.git
+   ```
+
+3. Add this repository as a remote, so you can pull upstream changes in the future with `git pull upstream master`.
+
+   ```sh
+   cd use-window-orientation
+   git remote add upstream https://github.com/tywmick/use-window-orientation.git
+   ```
+
+4. Install dependencies.
+
+   ```sh
+   npm install
+   ```
+
+   - Don't worry about the [high security vulnerability](https://github.com/developit/microbundle/issues/695) in `serialize-javascript` that npm brings up—the vulnerable code [isn't used by Microbundle](https://github.com/developit/microbundle/issues/695#issuecomment-672773094).
+
+Now, you can build the package with `npm run build`, build _and_ watch for changes with `npm run dev` (automatically rebuilding on each change in the source), and run the test suite with `npm run test`.
+
+After building the package, you can test it in another project on your machine by [adding the local path](https://docs.npmjs.com/files/package.json#local-paths) as a dependency (e.g., by running `npm install /path/to/local/use-window-orientation` in that other project).
+
+<h2 id="related-projects">Related projects</h2>
+
+- [useWindowWidthBreakpoints](https://github.com/tywmick/use-window-width-breakpoints)

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

34062

increased by74.41%

Number of package files

12

increased by140%

Number of lines in readme file

118

increased by57.33%

Worsened metrics

Dev dependency count

14

increased by7.69%

Lines of code

34

decreased by-46.03%

Number of low quality alerts

3

increased by200%

No dependency changes