https://github.com/jakex7/react-native-click-outside

React Native library to detect clicks outside the component 👆
https://github.com/jakex7/react-native-click-outside

click-outside hacktoberfest open-source react-native

Last synced: 2 months ago
JSON representation

React Native library to detect clicks outside the component 👆

• Host: GitHub
• URL: https://github.com/jakex7/react-native-click-outside
• Owner: jakex7
• License: mit
• Created: 2023-02-03T17:11:54.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-17T00:31:29.000Z (about 1 year ago)
• Last Synced: 2024-09-21T14:14:12.470Z (4 months ago)
• Topics: click-outside, hacktoberfest, open-source, react-native
• Language: TypeScript
• Homepage:
• Size: 428 KB
• Stars: 66
• Watchers: 2
• Forks: 6
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# react-native-click-outside

React Native library to detect clicks outside the component 👆

![Build status - typescript compile](https://img.shields.io/github/actions/workflow/status/jakex7/react-native-click-outside/ci.yml?branch=main)

![License badge](https://img.shields.io/npm/l/react-native-click-outside)

![Latest, released version](https://img.shields.io/github/v/release/jakex7/react-native-click-outside)

![Date of latest commit](https://img.shields.io/github/last-commit/jakex7/react-native-click-outside)

## 🪄 Installation

```sh

yarn add react-native-click-outside

```

## 📖 Usage

First of all, you need to wrap your app with `ClickOutsideProvider` as high as possible, for example in `App.tsx`:

```tsx

import { ClickOutsideProvider } from 'react-native-click-outside';

export const App = () => (

  

    { /* rest of your app */ }

  

);

```

Then you can call `useClickOutside` hook to detect clicks outside the component. First argument is the function that will be called every time user clicks outside of this component. It returns `ref` that you need to attach to the component you want to detect clicks outside of. For example:

```tsx

import { useClickOutside } from 'react-native-click-outside';

export default function MyComponent() {

  const ref = useClickOutside(() => console.log('clicked outside A'));

  return (

    

      Test

    

  );

}

```

## 🛠️ Troubleshooting

### iOS works fine, but Android doesn't

As stated in react-native docs, on Android

> Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization.

_Source: https://reactnative.dev/docs/view#collapsable-android_

If your element is collapsable, it won't be rendered, and therefore you won't be able to detect clicks outside of it.

To prevent this, you need to add `collapsable={false}` prop to the component. For example:

```tsx

const ref = useClickOutside(() => console.log('clicked outside'));

  Test

```

## ⚖️ License

**[MIT](/LICENSE)**

## 📝 Contribute

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

### Built with ♥️ by Jakub Grzywacz