@culturehq/hooks - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

CHANGELOG.md

@@ -9,2 +9,14 @@ # Changelog
 
+## [0.2.0] - 2019-09-10
+
+### Added
+
+- The `useClickOutside` hook.
+- The `useEnterPress` hook.
+- The `useLazyImport` hook.
+
+### Changed
+
+- Switched to using TypeScript for development.
+
 ## [0.1.2] - 2019-06-27
@@ -28,5 +40,6 @@
 
-[unreleased]: https://github.com/CultureHQ/hooks/compare/v0.1.2...HEAD
+[unreleased]: https://github.com/CultureHQ/hooks/compare/v0.2.0...HEAD
+[0.2.0]: https://github.com/CultureHQ/hooks/compare/v0.1.2...v0.2.0
 [0.1.2]: https://github.com/CultureHQ/hooks/compare/v0.1.1...v0.1.2
 [0.1.1]: https://github.com/CultureHQ/hooks/compare/v0.1.0...v0.1.1
 [0.1.0]: https://github.com/CultureHQ/hooks/compare/fd80f4...v0.1.0

dist/hooks.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "useDocumentEvent", {
-  enumerable: true,
-  get: function get() {
-    return _useDocumentEvent["default"];
-  }
-});
-Object.defineProperty(exports, "useWindowEvent", {
-  enumerable: true,
-  get: function get() {
-    return _useWindowEvent["default"];
-  }
-});
-
-var _useDocumentEvent = _interopRequireDefault(require("./useDocumentEvent"));
-
-var _useWindowEvent = _interopRequireDefault(require("./useWindowEvent"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+Object.defineProperty(exports, "__esModule", { value: true });
+var useClickOutside_1 = require("./useClickOutside");
+exports.useClickOutside = useClickOutside_1.default;
+var useDocumentEvent_1 = require("./useDocumentEvent");
+exports.useDocumentEvent = useDocumentEvent_1.default;
+var useEnterPress_1 = require("./useEnterPress");
+exports.useEnterPress = useEnterPress_1.default;
+var useLazyImport_1 = require("./useLazyImport");
+exports.useLazyImport = useLazyImport_1.default;
+var useWindowEvent_1 = require("./useWindowEvent");
+exports.useWindowEvent = useWindowEvent_1.default;

dist/useDocumentEvent.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = require("react");
-
-var useDocumentEvent = function useDocumentEvent(event, callback) {
-  return (0, _react.useEffect)(function () {
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useDocumentEvent = function (event, callback) { return (react_1.useEffect(function () {
     document.addEventListener(event, callback);
-    return function () {
-      return document.removeEventListener(event, callback);
-    };
-  }, [event, callback]);
-};
-
-var _default = useDocumentEvent;
-exports["default"] = _default;
+    return function () { return document.removeEventListener(event, callback); };
+}, [event, callback])); };
+exports.default = useDocumentEvent;

dist/useWindowEvent.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = require("react");
-
-var useWindowEvent = function useWindowEvent(event, callback) {
-  return (0, _react.useEffect)(function () {
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useWindowEvent = function (event, callback) { return (react_1.useEffect(function () {
     window.addEventListener(event, callback);
-    return function () {
-      return window.removeEventListener(event, callback);
-    };
-  }, [event, callback]);
-};
-
-var _default = useWindowEvent;
-exports["default"] = _default;
+    return function () { return window.removeEventListener(event, callback); };
+}, [event, callback])); };
+exports.default = useWindowEvent;

package.json

 {
   "name": "@culturehq/hooks",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A set of reusable react hooks",
@@ -8,5 +8,5 @@ "main": "dist/hooks.js",
   "scripts": {
-    "build": "babel src --out-dir ./dist --ignore '**/__tests__'",
+    "compile": "tsc --project tsconfig.test.json",
     "lint": "chq-scripts lint",
-    "prepublishOnly": "rm -rf dist && mkdir dist && yarn build",
+    "prepublishOnly": "rm -rf dist && yarn tsc",
     "test": "chq-scripts test"
@@ -32,12 +32,17 @@ },
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.5",
+    "@babel/cli": "^7.6.0",
+    "@babel/core": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
-    "@culturehq/scripts": "^2.1.0",
-    "@testing-library/react": "^8.0.4",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-test-renderer": "^16.8.6"
+    "@babel/preset-typescript": "^7.6.0",
+    "@culturehq/scripts": "^4.0.2",
+    "@testing-library/react": "^9.1.4",
+    "@types/jest": "^24.0.18",
+    "@types/react": "^16.9.2",
+    "@types/react-dom": "^16.9.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-test-renderer": "^16.9.0",
+    "typescript": "^3.6.2"
   }
 }

README.md

 # @culturehq/hooks
 
+[![Build Status](https://github.com/CultureHQ/hooks/workflows/Push/badge.svg)](https://github.com/CultureHQ/hooks/actions)
 [![Package Version](https://img.shields.io/npm/v/@culturehq/hooks.svg)](https://www.npmjs.com/package/@culturehq/hooks)
@@ -11,2 +12,31 @@
 
+### `useClickOutside`
+
+Use to hook into when a click event occurs outside of a container. For example, the following code tracks when a user clicks outside of a box to close it.
+
+```javascript
+import React, { useCallback, useState } from "react";
+import { useClickOutside } from "@culturehq/hooks";
+
+const Box = ({ onClose }) => {
+  const containerRef = useClickOutside(onClose);
+
+  return <div ref={containerRef}>...</div>;
+};
+
+const App = () => {
+  const [open, setOpen] = useState(false);
+
+  const onOpen = () => setOpen(true);
+  const onClose = useCallback(() => setOpen(false), [setOpen]);
+
+  return (
+    <>
+      <button type="button" onClick={onOpen}>Open</button>
+      {open && <Box onClose={onClose} />}
+    </>
+  );
+};
+```
+
 ### `useDocumentEvent`
@@ -39,2 +69,36 @@
 
+### `useEnterPress`
+
+Use to hook into when the user pressed the enter key, for basic confirmations that do not have focus on a button for whatever reason.
+
+```javascript
+import React, { useCallback, useState } from "react";
+import { useEnterPress } from "@culturehq/hooks";
+
+const App = () => {
+  const [pressed, setPressed] = useState(false);
+
+  useEnterPress(useCallback(() => setPressed(true), []));
+
+  return pressed ? "Thank you." : "Press the enter key to continue.";
+};
+```
+
+### `useLazyImport`
+
+Use to code split a large module and only import it once a component has mounted. Can be used for example for a component or a utility module that isn't required on first paint.
+
+```javascript
+import React from "react";
+import { useLazyImport } from "@culturehq/hooks";
+
+import Spinner from "./Spinner";
+
+const App = () => {
+  const HeavyComponent = useLazyImport(() => import("./HeavyComponent"));
+
+  return HeavyComponent ? <HeavyComponent /> : <Spinner />;
+};
+```
+
 ### `useWindowEvent`
@@ -66,2 +130,2 @@
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+The code is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21169

increased by81.46%

Number of package files

31

increased by138.46%

Lines of code

299

increased by164.6%

Number of lines in readme file

129

increased by98.46%

Worsened metrics

Dev dependency count

14

increased by55.56%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes