How to detect click outside React component ?
We can use the createRef() method to create a reference for any element in the class-based component. Then we can check whether click event occurred in the component or outside the component.
In the functional component, we can use the useRef() hook to create a reference for any element.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure: It will look like the following.
Project Structure
App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Filename- App.js: Using Class base Component
Javascript
import React from 'react' ;
class App extends React.Component {
constructor(props) {
super (props);
this .box = React.createRef();
}
componentDidMount() {
document.addEventListener( 'click' , this .handleOutsideClick);
}
handleOutsideClick = (event) => {
if ( this .box && ! this .box.current.contains(event.target)) {
alert( 'you just clicked outside of box!' );
}
}
render() {
return <div style={{
margin: 300,
width: 200, height: 200, backgroundColor: 'green'
}}
ref={ this .box}>{ this .props.children}</div>;
}
}
export default App;
|
Filename- App.js:< Using Functional Component/p>
Javascript
import React, { useEffect, useRef } from 'react'
function App(props) {
const box = useRef( null );
useOutsideAlerter(box);
return (<div style={{
margin: 300,
width: 200, height: 200, backgroundColor: 'green'
}}
ref={box}>{props.children}</div>
)
}
export default App;
function useOutsideAlerter(ref) {
useEffect(() => {
function handleOutsideClick(event) {
if (ref.current && !ref.current.contains(event.target)) {
alert( "you just clicked outside of box!" );
}
}
document.addEventListener( "click" , handleOutsideClick);
return () => document.removeEventListener( "click" , handleOutsideClick);
}, [ref]);
}
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Last Updated :
11 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...