react-native-click-outside
React Native library to detect clicks outside the component
🪄
Installation
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:
import { ClickOutsideProvider } from 'react-native-click-outside';
export const App = () => (
<ClickOutsideProvider>
{ /* rest of your app */ }
</ClickOutsideProvider>
);
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:
import { useClickOutside } from 'react-native-click-outside';
export default function MyComponent() {
const ref = useClickOutside<View>(() => console.log('clicked outside A'));
return (
<View ref={ref}>
<Text>Test</Text>
</View>
);
}
⚖️
License
📝
Contribute
See the contributing guide to learn how to contribute to the repository and the development workflow.
74 Jan 6, 2023
399 Jan 3, 2023
64 Oct 6, 2021
6 Sep 21, 2022
11 Nov 20, 2021
120 Nov 21, 2022
16 Sep 23, 2022
492 Dec 31, 2022
14 Sep 8, 2022
1.5k Dec 28, 2022
271 Dec 27, 2022
23 Nov 10, 2022
17 Dec 14, 2022
4 Oct 19, 2021
120 Dec 14, 2022
24 Apr 14, 2022
3 Jun 24, 2022
33 Jun 20, 2022
540 Oct 31, 2022