React Native library to detect clicks outside the component
source link: https://reactnativeexample.com/react-native-library-to-detect-clicks-outside-the-component/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Native library to detect clicks outside the component
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.
Built with ♥️ by Jakub Grzywacz
GitHub
Booking Rider System with React Native
Subscribe to React Native Example for Android and iOS
Get the latest posts delivered right to your inbox
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK