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.
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
import React from 'react' ;
class App extends React.Component { constructor(props) {
super (props);
// Creating a reference
this .box = React.createRef();
}
componentDidMount() {
// Adding a click event listener
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'
}}
// Assigning the ref to div component
ref={ this .box}>{ this .props.children}</div>;
}
} export default App;
|
Filename- App.js:
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 for click event
function handleOutsideClick(event) {
if (ref.current && !ref.current.contains(event.target)) {
alert( "you just clicked outside of box!" );
}
}
// Adding click event listener
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: