Merge pull request #15 from smithki/development

Release v0.6.0

.circleci/config.yml

@@ -86,6 +86,7 @@ aliases: [
     "packages/use-interval/node_modules",
     "packages/use-previous/node_modules",
     "packages/use-timer/node_modules",
+    "packages/use-click-outside/node_modules",
   ],
 
   # List of build output paths that should be persisted to the
@@ -106,6 +107,7 @@ aliases: [
     "packages/use-interval/dist",
     "packages/use-previous/dist",
     "packages/use-timer/dist",
+    "packages/use-click-outside/dist",
   ],
 
   # Yarn lockfile cache key (update "vN" => "vN+1" to cache-bust).
@@ -333,6 +335,7 @@ workflows:
       - create-release:
           requires:
             - confirm-release
+            - lint
 
       - tag-release:
           requires:
@@ -366,6 +369,7 @@ workflows:
           requires:
             - build
             - test
+            - lint
 
       - tag-release:
           requires:

README.md

@@ -33,27 +33,28 @@ npm install @usable-react/use-force-update
 
 `usable-react` is managed as a monorepo so that hooks can be used collectively, or optimized as separate dependencies.
 
-| Package directory | Package Name | Description |
-| ----------------- | ------------ | ----------- |
-| [`usable-react`](./packages/usable-react) | `usable-react` | A package containing all the hooks! |
-| [`use-compare`](./packages/use-compare) | `@usable-react/use-compare` | Description coming soon! |
-| [`use-debounced`](./packages/use-debounced) | `@usable-react/use-debounced` | Description coming soon! |
-| [`use-deferred-children`](./packages/use-deferred-children) | `@usable-react/use-deferred-children` | Description coming soon! |
-| [`use-dom-event`](./packages/use-dom-event) | `@usable-react/use-dom-event` | Description coming soon! |
-| [`use-effect-after-mount`](./packages/use-effect-after-mount) | `@usable-react/use-effect-after-mount` | Description coming soon! |
-| [`use-effect-trigger`](./packages/use-effect-trigger) | `@usable-react/use-effect-trigger` | Description coming soon! |
-| [`use-filter`](./packages/use-filter) | `@usable-react/use-filter` | Description coming soon! |
-| [`use-force-update`](./packages/use-force-update) | `@usable-react/use-force-update` | Description coming soon! |
-| [`use-hash`](./packages/use-hash) | `@usable-react/use-hash` | Description coming soon! |
-| [`use-hash-compare`](./packages/use-hash-compare) | `@usable-react/use-hash-compare` | Description coming soon! |
-| [`use-initial-render`](./packages/use-initial-render) | `@usable-react/use-initial-render` | Description coming soon! |
-| [`use-interval`](./packages/use-interval) | `@usable-react/use-interval` | Description coming soon! |
-| [`use-previous`](./packages/use-previous) | `@usable-react/use-previous` | Description coming soon! |
-| [`use-timer`](./packages/use-timer) | `@usable-react/use-timer` | Description coming soon! |
+| Package Name | Description |
+| ------------ | ----------- |
+| [`usable-react`](./packages/usable-react) | A package containing all the hooks! |
+| [`@usable-react/use-compare`](./packages/use-compare) | Check if a value has changed since the last render. |
+| [`@usable-react/use-debounced`](./packages/use-debounced) | Debounce an incoming change to the given value. |
+| [`@usable-react/use-deferred-children`](./packages/use-deferred-children) | Get a copy of the given React `children`, deferred to the next update. |
+| [`@usable-react/use-dom-event`](./packages/use-dom-event) | Create event listeners outside the React lifecycle for a given DOM element. |
+| [`@usable-react/use-effect-after-mount`](./packages/use-effect-after-mount) | Just like `useEffect`, but only executes _after_ mounting! |
+| [`@usable-react/use-effect-trigger`](./packages/use-effect-trigger) | An effect you can trigger with a function call! |
+| [`@usable-react/use-filter`](./packages/use-filter) | Perform a fuzzy search on a dataset using [`fuse.js`](https://github.com/krisk/fuse). |
+| [`@usable-react/use-force-update`](./packages/use-force-update) | Force a component to re-render. |
+| [`@usable-react/use-hash`](./packages/use-hash) | Get the MD5 hash of an arbitrary object (based on [`object-hash`](https://github.com/puleos/object-hash)). |
+| [`@usable-react/use-hash-compare`](./packages/use-hash-compare) | Just like `useCompare`, but using the value's MD5 hash. |
+| [`@usable-react/use-initial-render`](./packages/use-initial-render) | Just like `useEffect`, but only executes on a component's initial render. |
+| [`@usable-react/use-interval`](./packages/use-interval) | Execute an effect on an interval (with automatic cleanup). |
+| [`@usable-react/use-previous`](./packages/use-previous) | Returns the previous value of the given source. |
+| [`@usable-react/use-timer`](./packages/use-timer) | Contains several hooks to easily create timers within the React lifecycle. |
+| [`@usable-react/use-click-outside`](./packages/use-click-outside) | Detect click events that occur outside the supplied elements. |
 
 ## Contributing
 
-`usable-react` is at an early stage of development, so contributing is a great way to both move the project forward and have your ideas represented! We care deeply about building tools that foster a more creative, approachable development cycle to the decentralized application space—but we need the community's help to get there! Here are some steps to open a PR:
+`usable-react` is at an early stage of development, so contributing is a great way to both move the project forward and have your ideas represented! Here are some steps to open a PR:
 
 1. Fork it!
 2. Create a branch based off `development` named with a package directory (or directories), leading label, and a descriptive title:
@@ -65,9 +66,9 @@ npm install @usable-react/use-force-update
     2. `yarn bootstrap`
     3. `PKG=$PACKAGE_TARGET yarn dev`
 3. Make your changes! Commit early and often and [write good commit messages](https://chris.beams.io/posts/git-commit/).
-4. Open a [draft PR](https://github.blog/2019-02-14-introducing-draft-pull-requests/) so that a core contributor can review the code and merge your changes!
+4. Open a [draft PR](https://github.blog/2019-02-14-introducing-draft-pull-requests/) so that a core contributor (probably [@smithki](https://github.com/smithki)) can review the code and merge your changes!
 
-As aforementioned, this project is still taking shape :baby: More formal contributor processes will undoubtedly be added over time according to the project's (and community's) wants or needs!
+As aforementioned, this project is still taking shape :baby: More formal contributor processes will undoubtedly be added over time according to the project's needs!
 
 ## Development Scripts
 
@@ -77,9 +78,9 @@ As aforementioned, this project is still taking shape :baby: More formal contrib
 | `exec` | `PKG=$PACKAGE_TARGET yarn exec -- ...` | Execute commands in the specified package. |
 | `dev` | `PKG=$PACKAGE_TARGET yarn dev` | Start the specified package in development mode, or all packages if `$PKG` is omitted. |
 | `build` | `PKG=$PACKAGE_TARGET yarn build` | Build the specified package for production, or all packages if `$PKG` is omitted. |
-| `clean` | `PKG=$PACKAGE_TARGET yarn clean` | Run cleaning scripts for the specified package (NOTE: removes `node_modules`), or all packages if `$PKG` is omitted. |
+| `clean` | `PKG=$PACKAGE_TARGET yarn clean` | Run cleaning scripts for the specified package, or all packages if `$PKG` is omitted. |
 | `lint` | `PKG=$PACKAGE_TARGET yarn lint` | Run the linter for the specified package, or all packages if `$PKG` is omitted. |
 | `test` | `PKG=$PACKAGE_TARGET yarn test` | Run tests for the specified package, or all packages if `$PKG` is omitted. |
 | `release` | `yarn release` | Publishes all packages with unreleased versions. |
-| `release` | `yarn release_canary` | Publishes all packages with unreleased versions. |
+| `release_canary` | `yarn release_canary` | Publishes pre-release versions for all packages. |
 

lerna.json

@@ -5,7 +5,7 @@
   "workspaces": [
     "packages/*"
   ],
-  "version": "0.5.4",
+  "version": "0.6.0",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/usable-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "usable-react",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -28,19 +28,20 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-compare": "^0.5.4",
-    "@usable-react/use-debounced": "^0.5.4",
-    "@usable-react/use-deferred-children": "^0.5.4",
-    "@usable-react/use-dom-event": "^0.5.4",
-    "@usable-react/use-effect-after-mount": "^0.5.4",
-    "@usable-react/use-effect-trigger": "^0.5.4",
-    "@usable-react/use-filter": "^0.5.4",
-    "@usable-react/use-force-update": "^0.5.4",
-    "@usable-react/use-hash": "^0.5.4",
-    "@usable-react/use-hash-compare": "^0.5.4",
-    "@usable-react/use-initial-render": "^0.5.4",
-    "@usable-react/use-interval": "^0.5.4",
-    "@usable-react/use-previous": "^0.5.4",
-    "@usable-react/use-timer": "^0.5.4"
+    "@usable-react/use-compare": "^0.6.0",
+    "@usable-react/use-debounced": "^0.6.0",
+    "@usable-react/use-deferred-children": "^0.6.0",
+    "@usable-react/use-dom-event": "^0.6.0",
+    "@usable-react/use-effect-after-mount": "^0.6.0",
+    "@usable-react/use-effect-trigger": "^0.6.0",
+    "@usable-react/use-filter": "^0.6.0",
+    "@usable-react/use-force-update": "^0.6.0",
+    "@usable-react/use-hash": "^0.6.0",
+    "@usable-react/use-hash-compare": "^0.6.0",
+    "@usable-react/use-initial-render": "^0.6.0",
+    "@usable-react/use-interval": "^0.6.0",
+    "@usable-react/use-previous": "^0.6.0",
+    "@usable-react/use-timer": "^0.6.0",
+    "@usable-react/use-click-outside": "^0.6.0"
   }
 }

packages/usable-react/src/index.ts

@@ -12,3 +12,4 @@ export * from '@usable-react/use-hash-compare';
 export * from '@usable-react/use-effect-after-mount';
 export * from '@usable-react/use-interval';
 export * from '@usable-react/use-timer';
+export * from '@usable-react/use-click-outside';

packages/use-click-outside/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.eslintrc"
+}

packages/use-click-outside/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-present
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/use-click-outside/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@usable-react/use-click-outside",
+  "version": "0.6.0",
+  "description": "Basic React hooks to get any project off the ground.",
+  "author": "Ian K Smith <[email protected]>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/smithki/usable-react"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.m.js",
+  "types": "dist/use-click-outside/src/index.d.ts",
+  "scripts": {
+    "dev": "microbundle watch src/index.ts --format es,cjs --target web --external react",
+    "build": "microbundle build src/index.ts  --format es,cjs --target web --external react",
+    "lint": "eslint --fix src/**/*.ts",
+    "test": "echo \"No tests to run!\"",
+    "clean:dist": "rimraf dist",
+    "clean:cache": "rimraf node_modules/.cache"
+  },
+  "peerDependencies": {
+    "react": "^16.11.0"
+  },
+  "dependencies": {
+    "@usable-react/use-dom-event": "^0.6.0",
+    "@usable-react/use-effect-trigger": "^0.6.0"
+  }
+}

packages/use-click-outside/src/index.ts

@@ -0,0 +1,19 @@
+import { EffectCallback, DependencyList } from 'react';
+import { useDomEvent } from '@usable-react/use-dom-event';
+import { useEffectTrigger } from '@usable-react/use-effect-trigger';
+
+export function useClickOutside(element: HTMLElement | null, effect: EffectCallback, deps?: DependencyList): void;
+export function useClickOutside(elements: (HTMLElement | null)[], effect: EffectCallback, deps?: DependencyList): void;
+export function useClickOutside(
+  elements: HTMLElement | null | (HTMLElement | null)[],
+  effect: EffectCallback,
+  deps: DependencyList = [],
+): void {
+  const elList = Array.isArray(elements) ? elements : [elements];
+  const triggerClickOutside = useEffectTrigger(effect, deps);
+
+  const addWindowListener = useDomEvent(window);
+  addWindowListener('click', e => {
+    if (elList.every(el => !!el && !el.contains(e.target as any))) triggerClickOutside();
+  });
+}

packages/use-click-outside/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

packages/use-compare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-compare",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,6 +26,6 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-previous": "^0.5.4"
+    "@usable-react/use-previous": "^0.6.0"
   }
 }

packages/use-debounced/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-debounced",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",

packages/use-deferred-children/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-deferred-children",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,6 +26,6 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-initial-render": "^0.5.4"
+    "@usable-react/use-initial-render": "^0.6.0"
   }
 }

packages/use-dom-event/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-dom-event",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",

packages/use-dom-event/src/index.ts

@@ -25,8 +25,10 @@ export type UseDomEventAddListenerFunction<T extends HTMLElement | Window | Docu
   : never;
 
 /**
- * Returns a `boolean` indicating whether the given `value` has changed since
- * the previous update.
+ * Creates a React hook that registers DOM event listeners on the given
+ * `element`. The effect returns a `void` function that can be used to remove
+ * the event listener manually. Event listeners created this way are
+ * automatically cleaned up before the component unmounts.
  */
 export function useDomEvent<T extends HTMLElement | Window | Document>(
   element: T | MutableRefObject<T> | RefObject<T>,

packages/use-effect-after-mount/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-effect-after-mount",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,6 +26,6 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-initial-render": "^0.5.4"
+    "@usable-react/use-initial-render": "^0.6.0"
   }
 }

packages/use-effect-after-mount/src/index.ts

@@ -2,8 +2,8 @@ import { EffectCallback, useEffect, useRef } from 'react';
 import { useInitialRender } from '@usable-react/use-initial-render';
 
 /**
- * Exactly like `useEffect` except that the effect only executes on subsequent
- * updates after mounting.
+ * Exactly like `useEffect`, except that the effect only executes on subsequent
+ * updates after a component mounts.
  */
 export function useEffectAfterMount(effect: EffectCallback, deps?: readonly any[]) {
   const isInitialRender = useInitialRender();

packages/use-effect-trigger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-effect-trigger",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,6 +26,6 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-compare": "^0.5.4"
+    "@usable-react/use-compare": "^0.6.0"
   }
 }

packages/use-effect-trigger/src/index.ts

@@ -2,7 +2,7 @@ import { EffectCallback, useCallback, useEffect, useRef, useState } from 'react'
 import { useCompare } from '@usable-react/use-compare';
 
 /**
- * Exactly like `useEffect` except that it returns a memoized function to
+ * Exactly like `useEffect`, except that it returns a memoized function to
  * trigger the effect in question. The effect only executes when the trigger
  * updates regardless of the given `deps`.
  *

packages/use-filter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usable-react/use-filter",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "Basic React hooks to get any project off the ground.",
   "author": "Ian K Smith <[email protected]>",
   "license": "MIT",
@@ -26,9 +26,9 @@
     "react": "^16.11.0"
   },
   "dependencies": {
-    "@usable-react/use-compare": "^0.5.4",
-    "@usable-react/use-hash": "^0.5.4",
-    "@usable-react/use-timer": "^0.5.4",
+    "@usable-react/use-compare": "^0.6.0",
+    "@usable-react/use-hash": "^0.6.0",
+    "@usable-react/use-timer": "^0.6.0",
     "fuse.js": "3.4.6"
   }
 }