https://github.com/iqbal-rashed/outsideclick-react
This is a lightweight React package that provides a hook and component for detecting clicks outside of a specified element.
https://github.com/iqbal-rashed/outsideclick-react
hook outsideclick react react-component react-hooks reactjs
Last synced: 6 months ago
JSON representation
This is a lightweight React package that provides a hook and component for detecting clicks outside of a specified element.
- Host: GitHub
- URL: https://github.com/iqbal-rashed/outsideclick-react
- Owner: iqbal-rashed
- License: mit
- Created: 2022-11-01T10:10:54.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-29T09:32:51.000Z (10 months ago)
- Last Synced: 2025-04-30T19:41:45.837Z (9 months ago)
- Topics: hook, outsideclick, react, react-component, react-hooks, reactjs
- Language: TypeScript
- Homepage: https://github.com/iqbal-rashed/outsideclick-react
- Size: 160 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# OutSideClick React
`outsideclick-react` is a lightweight React package that detects clicks outside a specified element, useful for dropdowns, modals, etc.
## Installation
```bash
npm install outsideclick-react
```
or
```bash
yarn add outsideclick-react
```
## Usage
### Hook
```javascript
import { useOutsideClick } from "outsideclick-react";
function MyComponent() {
const handleOutsideClick = (e) => {
// Handle outside click
};
const ref = useOutsideClick(handleOutsideClick);
/* const ref = useOutsideClick(handleOutsideClick, ".ignore-element") */
return
{/* Your component */};
}
```
### Component
```javascript
import { OutsideClick } from "outsideclick-react";
function MyComponent() {
return (
{
// Handle outside click
}}
ignoreElement=".ignore"
>
{/* Your component */}
);
}
```
## API
### `useOutsideClick`
A hook that detects clicks outside of a specified element.
#### Parameters:
- **outsideClick**: `(v: HTMLElement) => void` - A function that gets called when an outside click is detected.
- **ignoreElement** (optional): `IgnoreElementType` - An element or selector that should be ignored when detecting outside clicks.
#### Returns:
- A `ref` object that should be attached to the target element.
### `OutsideClick`
A component that detects clicks outside of its children.
#### Props:
- `onOutsideClick`: Function that is called when an outside click is detected.
- `ignoreElement`: An element or selector to ignore when detecting outside clicks.
## Contribution
If you'd like to contribute, please submit a pull request.
## Support
If you want to support my work, you can buy me a coffee!
[](https://buymeacoffee.com/rashed.iqbal)