https://github.com/omtanke/react-use-event-outside
It allows you to perform your operations in locations other than the place marked with ref.
https://github.com/omtanke/react-use-event-outside
react reacthooks ref
Last synced: 9 months ago
JSON representation
It allows you to perform your operations in locations other than the place marked with ref.
- Host: GitHub
- URL: https://github.com/omtanke/react-use-event-outside
- Owner: omtanke
- License: mit
- Created: 2021-05-14T12:56:48.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-22T14:19:20.000Z (about 5 years ago)
- Last Synced: 2025-09-23T21:20:59.639Z (10 months ago)
- Topics: react, reacthooks, ref
- Language: JavaScript
- Homepage:
- Size: 34.2 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# react-use-event-outside
## Installation
Install with [Yarn](https://yarnpkg.com/):
```sh
yarn add @omtanke/react-use-event-outside
```
Or with [NPM](https://www.npmjs.com/):
```sh
npm i @omtanke/react-use-event-outside
```
Import into your component like so:
```javascript
import useEventOutside from '@omtanke/react-use-event-outside';
```
## Usage
```javascript
useEventOutside(REF, EVENT_NAME, FUNCTION);
```
**REF**: Outside which element you want to trigger.
**EVENT_NAME**: You want to listen to the event (Ex: 'mousedown', 'touchstart', etc.).
**FUNCTION**: The function you want to run when triggered.
### Example
[CodeSandbox](https://codesandbox.io/s/useeventoutside-6gfby?file=/src/App.js)
or
```javascript
const App = () => {
const ref = useRef(null);
const [isOpen, setIsOpen] = useState(false);
const closeMenu = useCallback(() => {
setIsOpen(false);
}, []);
useEventOutside(ref, 'mousedown', closeMenu);
return (
setIsOpen(!isOpen)}>Toggle
{isOpen &&
- Item
- Item
}
);
};
```