Socket
Socket
Sign inDemoInstall

react-outer-click

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-outer-click - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

lib/index.js

16

package.json
{
"name": "react-outer-click",
"version": "1.0.2",
"version": "2.0.0",
"description": "React component which detect mouse clicks outside of itself.",
"main": "lib/OuterClick.js",
"main": "lib/index.js",
"files": [

@@ -32,13 +32,17 @@ "lib"

"dependencies": {
"prop-types": "^15.5.10"
"prop-types": "^15.7.2"
},
"peerDependencies": {
"react": ">=15.3.0",
"react-dom": ">=15.3.0"
"react": "^16.0.0"
},
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.13.0",
"eslint-plugin-react-hooks": "^1.6.0",
"husky": "^2.3.0",

@@ -45,0 +49,0 @@ "lint-staged": "^8.1.7",

@@ -7,9 +7,38 @@ # react-outer-click

### `useOuterClick` Hook (recommended)
```jsx
import { useOuterClick } from 'react-outer-click';
const Example = props => {
const el = useRef(null);
useOuterClick(el, () => {
console.log('Clicked outside');
});
return <div ref={el}>Example</div>;
};
```
import OuterClick from 'react-outer-click';
// Inside a render method
<OuterClick onOuterClick{handleOuterClick}>
<SomeChildComponent />
</OuterClick>
### `OuterClick` Component
```jsx
import { OuterClick } from 'react-outer-click';
const Example = props => {
return (
<OuterClick
onOuterClick={() => {
console.log('Clicked outside');
}}
>
Example
</OuterClick>
);
};
```
## Requirements
Requires a minimum of React version 16.8.0. If you're on an older version of React, then checkout [v1](https://github.com/jacobbuck/react-outer-click/tree/v1).
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc