Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-click-away-listener
Advanced tools
react-click-away-listener - npm Package Compare versions
Comparing version 2.1.0 to 2.2.0
@@ -1,2 +0,2 @@ | ||
| import n,{useRef as e,useEffect as t,cloneElement as o}from"react";function r(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}var u={click:"onClick",focusin:"onFocus",focusout:"onFocus",mousedown:"onMouseDown",mouseup:"onMouseUp",touchstart:"onTouchStart",touchend:"onTouchEnd"},c=function(c){var i,a=c.children,d=c.onClickAway,s=c.focusEvent,v=void 0===s?"focusin":s,f=c.mouseEvent,l=void 0===f?"click":f,m=c.touchEvent,E=void 0===m?"touchend":m,p=e(null),h=e(null),L=e(!1);t((function(){return setTimeout((function(){L.current=!0}),0),function(){L.current=!1}}),[]);var y=function(n){return function(e){h.current=e.target;var t=null==a?void 0:a.props[n];t&&t(e)}};t((function(){var n=function(n){L.current&&(p.current&&p.current.contains(n.target)||h.current===n.target||!document.contains(n.target)||d(n))};return document.addEventListener(l,n),document.addEventListener(E,n),document.addEventListener(v,n),function(){document.removeEventListener(l,n),document.removeEventListener(E,n),document.removeEventListener(v,n)}}),[v,l,d,E]);var g=u[l],k=u[E],w=u[v];return n.Children.only(o(a,(r(i={ref:function(n){p.current=n;var e=a.ref;"function"==typeof e?e(n):e&&(e.current=n)}},w,y(w)),r(i,g,y(g)),r(i,k,y(k)),i)))};c.displayName="ClickAwayListener";export default c; | ||
| import n,{useRef as e,useEffect as t,cloneElement as o}from"react";function r(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}var u={click:"onClick",focusin:"onFocus",focusout:"onFocus",mousedown:"onMouseDown",mouseup:"onMouseUp",touchstart:"onTouchStart",touchend:"onTouchEnd"},c=function(c){var i,a=c.children,d=c.onClickAway,s=c.focusEvent,v=void 0===s?"focusin":s,f=c.mouseEvent,l=void 0===f?"click":f,m=c.touchEvent,E=void 0===m?"touchend":m,p=e(null),h=e(null),L=e(!1);t((function(){return setTimeout((function(){L.current=!0}),0),function(){L.current=!1}}),[]);var y=function(n){return function(e){h.current=e.target;var t=null==a?void 0:a.props[n];t&&t(e)}};t((function(){var n=function(n){L.current&&(p.current&&p.current.contains(n.target)||h.current===n.target||!document.contains(n.target)||d(n))};return document.addEventListener(l,n),document.addEventListener(E,n),document.addEventListener(v,n),function(){document.removeEventListener(l,n),document.removeEventListener(E,n),document.removeEventListener(v,n)}}),[v,l,d,E]);var g=u[l],k=u[E],w=u[v];return n.Children.only(o(a,(r(i={ref:function(n){p.current=n;var e=a.ref;"function"==typeof e?e(n):e&&(e.current=n)}},w,y(w)),r(i,g,y(g)),r(i,k,y(k)),i)))};c.displayName="ClickAwayListener";export{c as default}; | ||
| //# sourceMappingURL=react-click-away-listener.es.js.map |
| { | ||
| "name": "react-click-away-listener", | ||
| "version": "2.1.0", | ||
| "version": "2.2.0", | ||
| "description": "A simple click away listener built with React Hooks", | ||
@@ -32,38 +32,39 @@ "main": "dist/react-click-away-listener.js", | ||
| "devDependencies": { | ||
| "@babel/preset-env": "^7.14.1", | ||
| "@babel/preset-react": "^7.13.13", | ||
| "@babel/preset-typescript": "^7.13.0", | ||
| "@rollup/plugin-babel": "^5.3.0", | ||
| "@rollup/plugin-node-resolve": "^13.0.0", | ||
| "@semantic-release/npm": "^7.1.3", | ||
| "@testing-library/react": "^11.2.6", | ||
| "@testing-library/react-hooks": "^5.1.2", | ||
| "@types/jest": "^26.0.23", | ||
| "@types/react": "^17.0.5", | ||
| "@typescript-eslint/parser": "^4.23.0", | ||
| "coveralls": "^3.1.0", | ||
| "@babel/preset-env": "^7.16.11", | ||
| "@babel/preset-react": "^7.16.7", | ||
| "@babel/preset-typescript": "^7.16.7", | ||
| "@rollup/plugin-babel": "^5.3.1", | ||
| "@rollup/plugin-node-resolve": "^13.1.3", | ||
| "@semantic-release/npm": "^9.0.1", | ||
| "@testing-library/react": "^13.1.1", | ||
| "@testing-library/react-hooks": "^8.0.0", | ||
| "@types/jest": "^27.4.1", | ||
| "@types/react": "^18.0.5", | ||
| "@typescript-eslint/parser": "^5.14.0", | ||
| "coveralls": "^3.1.1", | ||
| "cz-conventional-changelog": "^3.3.0", | ||
| "eslint": "^7.26.0", | ||
| "eslint-config-prettier": "^8.3.0", | ||
| "eslint-plugin-import": "^2.22.1", | ||
| "eslint-plugin-jsx-a11y": "^6.4.1", | ||
| "eslint-plugin-prettier": "^3.4.0", | ||
| "eslint-plugin-react": "^7.23.2", | ||
| "eslint-plugin-react-hooks": "^4.2.0", | ||
| "eslint": "^8.10.0", | ||
| "eslint-config-prettier": "^8.5.0", | ||
| "eslint-plugin-import": "^2.25.4", | ||
| "eslint-plugin-jsx-a11y": "^6.5.1", | ||
| "eslint-plugin-prettier": "^4.0.0", | ||
| "eslint-plugin-react": "^7.29.3", | ||
| "eslint-plugin-react-hooks": "^4.3.0", | ||
| "ghooks": "^2.0.4", | ||
| "jest": "^26.6.3", | ||
| "jest": "^27.5.1", | ||
| "npm-run-all": "^4.1.5", | ||
| "prettier": "^2.3.0", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2", | ||
| "prettier": "^2.5.1", | ||
| "react": "^18.0.0", | ||
| "react-dom": "^18.0.0", | ||
| "rimraf": "^3.0.2", | ||
| "rollup": "^2.47.0", | ||
| "rollup": "^2.70.0", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "typescript": "^4.2.4" | ||
| "typescript": "^4.6.2" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2" | ||
| "react": "^18.0.0", | ||
| "react-dom": "^18.0.0" | ||
| }, | ||
| "jest": { | ||
| "testEnvironment": "jsdom", | ||
| "collectCoverageFrom": [ | ||
@@ -70,0 +71,0 @@ "<rootDir>/src/**.tsx" |
@@ -22,6 +22,6 @@ <p align="center"> | ||
| - It's quite small in size. | ||
| - It's built with TypeScript. | ||
| - It supports both Mouse and Touch Events. | ||
| - It works with Portals (>= v2). | ||
| - It's quite **small** in size! Just [](https://bundlephobia.com/result?p=react-click-away-listener) minified, or [](https://bundlephobia.com/result?p=react-click-away-listener) minified & gzipp’d. | ||
| - It's built with **TypeScript**. | ||
| - It works with [React Portals](https://reactjs.org/docs/portals.html) ([v2.0.0](https://github.com/ooade/react-click-away-listener/releases/tag/v2.0.0) onwards). | ||
| - It supports **mouse**, **touch** and **focus** events. | ||
@@ -48,6 +48,44 @@ ## Usage | ||
| Caveats: | ||
| - Ensure the ClickAway component has just one child else `React.only` will throw an error. | ||
| - It doesn't work with Text nodes. | ||
| ### Caveats | ||
| [v2.0.0](https://github.com/ooade/react-click-away-listener/releases/tag/v2.0.0) has breaking changes which uses the [`React.Children.only`](https://reactjs.org/docs/react-api.html#reactchildrenonly) API. | ||
| Thus, the following caveats apply for the `children` of the `<ClickAwayListener>` component: | ||
| 1. You may pass **only one child** to the `<ClickAwayListener>` component. | ||
| 2. You may not pass plain text nodes to the `<ClickAwayListener>` component. | ||
| Violating the above caveats will result in the following error: | ||
| ```js | ||
| Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. | ||
| Check the render method of `ClickAwayListener`. | ||
| ``` | ||
| If you have multiple child components to pass, you can simply wrap them around a [React Fragment](https://reactjs.org/docs/fragments.html) like so: | ||
| ```jsx | ||
| // Assume the `handleClickAway` function is defined. | ||
| <ClickAwayListener onClickAway={handleClickAway}> | ||
| <> | ||
| <p>First paragraph</p> | ||
| <button>Example Button</button> | ||
| <p>Second paragraph</p> | ||
| </> | ||
| </ClickAwayListener> | ||
| ``` | ||
| Or if you only have text nodes, you can also wrap them in a [React Fragment](https://reactjs.org/docs/fragments.html) like so: | ||
| ```jsx | ||
| // Assume the `handleClickAway` function is defined. | ||
| <ClickAwayListener onClickAway={handleClickAway}> | ||
| <> | ||
| First text node | ||
| Second text node | ||
| </> | ||
| </ClickAwayListener> | ||
| ``` | ||
| ## Props | ||
@@ -60,2 +98,3 @@ | ||
| | touchEvent | 'touchstart' \|<br/>'touchend' | 'touchend' | The touch event type that gets fired on ClickAway | | ||
| | focusEvent | 'focusin' \|<br/>'focusout' | 'focusin' | The focus event type that gets fired on ClickAway | | ||
@@ -62,0 +101,0 @@ ## Examples |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by10.95%
30552
- Number of lines in readme file
- increased by59.09%
105
No dependency changes