react-cool-onclickoutside - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/index.d.ts

 declare module 'react-cool-onclickoutside' {
-  export interface Callback {
+  interface Callback {
     (event?: MouseEvent | TouchEvent): void;
   }
 
-  export interface Options {
+  interface Options {
     eventTypes?: string[];
@@ -11,5 +11,9 @@ excludeScrollbar?: boolean;
 
-  export interface SetRef {
+  interface SetRef {
     (el: HTMLElement | null): void;
   }
+
+  const useOnclickoutside: (callback: Callback, options?: Options) => SetRef;
+
+  export default useOnclickoutside;
 }

dist/index.esm.js

@@ -1,1 +0,1 @@
-import{useRef as n,useCallback as t,useEffect as e}from"react";var r=function(n){return document.documentElement.clientWidth<=n.clientX||document.documentElement.clientHeight<=n.clientY},o=function(n){return!(!n.includes("touch")||!function(){if("undefined"==typeof window||"function"!=typeof window.addEventListener)return!1;var n=!1,t=Object.defineProperty({},"passive",{get:function(){n=!0}}),e=function(){};return window.addEventListener("test",e,t),window.removeEventListener("test",e,t),n}())&&{passive:!0}};export default function(i){var u=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},c=u.eventTypes,d=void 0===c?["mousedown","touchstart"]:c,f=u.excludeScrollbar,a=void 0!==f&&f;if("undefined"==typeof document||!document.createElement)return function(){return null};var l=n([]),v=t((function(n){n&&l.current.push(n)}),[]),m=t((function(n){var t=l.current;if(t.length&&i&&(!a||!r(n))){var e=!0,o=!1,u=void 0;try{for(var c,d=t[Symbol.iterator]();!(e=(c=d.next()).done);e=!0){if(c.value.contains(n.target))return}}catch(n){o=!0,u=n}finally{try{e||null==d.return||d.return()}finally{if(o)throw u}}i(n)}}),[l,a,i]);return e((function(){return i?(d.forEach((function(n){document.addEventListener(n,m,o(n))})),function(){d.forEach((function(n){document.removeEventListener(n,m,o(n))}))}):function(){return null}}),[i,d]),v}
+import{useRef as n,useCallback as e,useEffect as t}from"react";var r=function(n){return document.documentElement.clientWidth<=n.clientX||document.documentElement.clientHeight<=n.clientY},o=function(n){return!(!n.includes("touch")||!function(){if("undefined"==typeof window||"function"!=typeof window.addEventListener)return!1;var n=!1,e=Object.defineProperty({},"passive",{get:function(){n=!0}}),t=function(){return null};return window.addEventListener("test",t,e),window.removeEventListener("test",t,e),n}())&&{passive:!0}};export default function(i){var u=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},c=u.eventTypes,d=void 0===c?["mousedown","touchstart"]:c,f=u.excludeScrollbar,l=void 0!==f&&f;if("undefined"==typeof document||!document.createElement)return null;var a=n([]),v=e((function(n){n&&a.current.push(n)}),[]),m=e((function(n){var e=a.current;if(e.length&&i&&(!l||!r(n))){var t=!0,o=!1,u=void 0;try{for(var c,d=e[Symbol.iterator]();!(t=(c=d.next()).done);t=!0){if(c.value.contains(n.target))return}}catch(n){o=!0,u=n}finally{try{t||null==d.return||d.return()}finally{if(o)throw u}}i(n)}}),[a,l,i]);return t((function(){return i?(d.forEach((function(n){document.addEventListener(n,m,o(n))})),function(){d.forEach((function(n){document.removeEventListener(n,m,o(n))}))}):null}),[i,d]),v}

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";var react=require("react"),canUsePassiveEvents=function(){if("undefined"==typeof window||"function"!=typeof window.addEventListener)return!1;var e=!1,n=Object.defineProperty({},"passive",{get:function(){e=!0}}),t=function(){};return window.addEventListener("test",t,n),window.removeEventListener("test",t,n),e},clickedOnScrollbar=function(e){return document.documentElement.clientWidth<=e.clientX||document.documentElement.clientHeight<=e.clientY},getEventOptions=function(e){return!(!e.includes("touch")||!canUsePassiveEvents())&&{passive:!0}},index=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},t=n.eventTypes,r=void 0===t?["mousedown","touchstart"]:t,i=n.excludeScrollbar,c=void 0!==i&&i;if("undefined"==typeof document||!document.createElement)return function(){return null};var o=react.useRef([]),u=react.useCallback((function(e){e&&o.current.push(e)}),[]),a=react.useCallback((function(n){var t=o.current;if(t.length&&e&&(!c||!clickedOnScrollbar(n))){var r=!0,i=!1,u=void 0;try{for(var a,d=t[Symbol.iterator]();!(r=(a=d.next()).done);r=!0){if(a.value.contains(n.target))return}}catch(e){i=!0,u=e}finally{try{r||null==d.return||d.return()}finally{if(i)throw u}}e(n)}}),[o,c,e]);return react.useEffect((function(){return e?(r.forEach((function(e){document.addEventListener(e,a,getEventOptions(e))})),function(){r.forEach((function(e){document.removeEventListener(e,a,getEventOptions(e))}))}):function(){return null}}),[e,r]),u};module.exports=index;
+"use strict";var react=require("react"),canUsePassiveEvents=function(){if("undefined"==typeof window||"function"!=typeof window.addEventListener)return!1;var e=!1,t=Object.defineProperty({},"passive",{get:function(){e=!0}}),n=function(){return null};return window.addEventListener("test",n,t),window.removeEventListener("test",n,t),e},clickedOnScrollbar=function(e){return document.documentElement.clientWidth<=e.clientX||document.documentElement.clientHeight<=e.clientY},getEventOptions=function(e){return!(!e.includes("touch")||!canUsePassiveEvents())&&{passive:!0}},useOnclickoutside=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.eventTypes,r=void 0===n?["mousedown","touchstart"]:n,c=t.excludeScrollbar,i=void 0!==c&&c;if("undefined"==typeof document||!document.createElement)return null;var u=react.useRef([]),o=react.useCallback((function(e){e&&u.current.push(e)}),[]),a=react.useCallback((function(t){var n=u.current;if(n.length&&e&&(!i||!clickedOnScrollbar(t))){var r=!0,c=!1,o=void 0;try{for(var a,l=n[Symbol.iterator]();!(r=(a=l.next()).done);r=!0){if(a.value.contains(t.target))return}}catch(e){c=!0,o=e}finally{try{r||null==l.return||l.return()}finally{if(c)throw o}}e(t)}}),[u,i,e]);return react.useEffect((function(){return e?(r.forEach((function(e){document.addEventListener(e,a,getEventOptions(e))})),function(){r.forEach((function(e){document.removeEventListener(e,a,getEventOptions(e))}))}):null}),[e,r]),o};module.exports=useOnclickoutside;

package.json

 {
   "name": "react-cool-onclickoutside",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "React hook to listen for clicks outside of the component(s).",
@@ -25,2 +25,3 @@ "license": "MIT",
     "passive-event-listeners",
+    "exclude-scrollbar",
     "typescript"
@@ -48,3 +49,2 @@ ],
     "test:cov": "yarn clean:cov && yarn test --coverage",
-    "test:update": "yarn test -u",
     "test:watch": "yarn test --watch",
@@ -200,2 +200,3 @@ "build:demo": "yarn clean:dev && yarn clean:demo && rollup -c rollup/config.js --environment BUILD:demo",
     "@testing-library/react": "^9.4.0",
+    "@testing-library/react-hooks": "^3.2.1",
     "@types/jest": "^24.0.25",
@@ -219,3 +220,3 @@ "@types/react": "^16.9.17",
     "eslint-plugin-react-hooks": "^2.3.0",
-    "husky": "^4.0.1",
+    "husky": "^4.0.2",
     "jest": "^24.9.0",
@@ -222,0 +223,0 @@ "lint-staged": "^9.5.0",

README.md

@@ -7,15 +7,23 @@ # React Cool Onclickoutside
 
-> 🚧 This package is still under development, API may changed frequently. **Please don't use it now ✋🏼**. The milestone as below:
+[![build status](https://img.shields.io/travis/wellyshen/react-cool-onclickoutside/master?style=flat-square)](https://travis-ci.org/wellyshen/react-cool-onclickoutside)
+[![coverage status](https://img.shields.io/coveralls/github/wellyshen/react-cool-onclickoutside?style=flat-square)](https://coveralls.io/github/wellyshen/react-cool-onclickoutside?branch=master)
+[![npm version](https://img.shields.io/npm/v/react-cool-onclickoutside?style=flat-square)](https://www.npmjs.com/package/react-cool-onclickoutside)
+[![npm downloads](https://img.shields.io/npm/dm/react-cool-onclickoutside?style=flat-square)](https://www.npmtrends.com/react-cool-onclickoutside)
+[![npm downloads](https://img.shields.io/npm/dt/react-cool-onclickoutside?style=flat-square)](https://www.npmtrends.com/react-cool-onclickoutside)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-cool-onclickoutside?style=flat-square)](https://bundlephobia.com/result?p=react-cool-onclickoutside)
+[![MIT licensed](https://img.shields.io/github/license/wellyshen/react-cool-onclickoutside?style=flat-square)](https://raw.githubusercontent.com/wellyshen/react-cool-onclickoutside/master/LICENSE)
+[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange?style=flat-square)](#contributors-)
+[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)](https://github.com/wellyshen/react-cool-onclickoutside/blob/master/CONTRIBUTING.md)
+[![Twitter URL](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Fwellyshen%2Freact-cool-onclickoutside)](https://twitter.com/intent/tweet?text=With%20@react-cool-onclickoutside,%20I%20can%20build%20components%20efficiently.%20Thanks,%20@Welly%20Shen%20🤩)
 
-- [x] Triggers callback when clicks outside target area
-- [x] Use passive touch event listener to improve scrolling performance
-- [x] Support multiple refs
-- [x] Ignore callback triggered by clicks browser scrollbar
-- [ ] Unit testing
-- [x] Typescript type definition
-- [ ] Demo website
-- [ ] Demo code
-- [ ] CI/CD
-- [ ] Documentation
+## Features
 
+- 🎣 Listen for clicks outside based on React hook.
+- 👯‍♀️ Support multiple [refs](https://reactjs.org/docs/refs-and-the-dom.html) to cover more use cases.
+- 🧻 Uses [passive event listeners](https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners) to improve scrolling performance.
+- ⛔️ Scrollbar can be excluded from clicks outside callback.
+- 📜 Support [TypeScript](https://www.typescriptlang.org) type definition.
+- 🗄️ Server-side rendering friendly.
+- 🦠 Tiny size ([~ 741B gzipped](https://bundlephobia.com/result?p=react-cool-onclickoutside)). No external dependencies, aside for the `react`.
+
 ## Requirement
@@ -115,1 +123,19 @@
 - [react-onclickoutside](https://github.com/Pomax/react-onclickoutside)
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://www.linkedin.com/in/welly-shen-8b43287a/"><img src="https://avatars1.githubusercontent.com/u/21308003?v=4" width="100px;" alt=""/><br /><sub><b>Welly</b></sub></a><br /><a href="https://github.com/wellyshen/react-cool-onclickoutside/commits?author=wellyshen" title="Code">💻</a> <a href="https://github.com/wellyshen/react-cool-onclickoutside/commits?author=wellyshen" title="Documentation">📖</a> <a href="#maintenance-wellyshen" title="Maintenance">🚧</a></td>
+  </tr>
+</table>
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17532

increased by21.35%

Lines of code

26

increased by8.33%

Number of lines in readme file

140

increased by22.81%

Worsened metrics

Dev dependency count

55

increased by1.85%

No dependency changes