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); // 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:< 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 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:
