How to detect a click outside of a React component - LogRocket Blog (2023)

Web developers tend to use different components to make their React-based web applications more dynamic for better usability and flexibility.

A React component is a stand-alone, reusable, and isolated UI building block written in JSX (or TSX). Web applications generally allow the user to interact with one component at a time; for example, a user can open an HTML popup window and interact with the content of the popup window. If the user clicks outside of the popup area, the web application closes the popup or prevents the user from closing the popup.

Web developers also use custom dropdown menus to allow users to choose from a list of multiple options. If the user clicks outside of the custom dropdown while it is open, the dropdown will close.

In such a scenario, when the user clicks outside of a certain component, we need to trigger some actions.

In this tutorial, I'll explain how you can extend your class-based functional React components to detect an external click, and I'll explain an alternative way to accomplish the same task using a popular npm library.

Detection of an external click of a functional component

Let's create an HTML tooltip by creating a functional React component calledinformation box🇧🇷 The tooltip is displayed when the user clicks a button and closes when the user clicks outside of the tooltip component. We need to detect a click outside of a React component to implement a solution for this scenario.

First, let's create a new React app to get started. Alternatively, you can add the following external click detection code to your existing React app.

Enter the following command and create a new application.

npx Create-React-App React-Outside-Click cd React-Outside-ClickYarn Start

Now we need to create a new functional component to implement the tooltip component. Paste the code below./src/components/InfoBoxFunctional.js.

importar { useEffect, useRef } de 'reaccionar'; Exportfunktion InfoBox(props) { const ref = useRef(null); const { onClickOutside } = adereços; useEffect(() => { const handleClickOutside = (evento) => { if (ref.current && !ref.current.contains(event.target)) { onClickOutside && onClickOutside(); } }; document.addEventListener('click ', handleClickOutside, true); return () => { document.removeEventListener('click', handleClickOutside, true); }; }, [ onClickOutside ]); if(!props.show) devuelve nulo; return ( <div ref={ref} className='info-box'> {props.message} </div>);}

The above code snippet assigns the DOM reference to the current component instanceRefereevariable usinguseRefHook. After that, register a click handler in theuse effecthook for alldocumentto detect global click events.

We can also return a function with code to cleanuse effectHook, which means we can unregister our global click event listener when the component is unhooked. As you can see, the above code implements the cleanup code using theEliminar EventListenerDOM API function.

preparation ofinformation boxTooltip Components

oinformation boxThe component supports three accessories:

• message: specifies the tooltip message
• when clicked outside: defines a callback that we should fire when an external click event occurs
• Show: Refers to the visibility state and indicates whether the component is hidden or visible. If true, the tooltip is visible; otherwise, the component function returnsNulland will not show any content

ohandleClickOutThe function is triggered every time the user clicks on the document. so if we callwhen clicked outsideImmediately,Tooltip disappearseven if the user clicks on the tooltip itself.

The above code checks if the user clicks the tooltip (or its children) via thecontainsDOM API function. Therefore, thewhen clicked outsideThe callback is executed when a click event occurs outside of the tooltip component instance.

oinformation boxthe component is now complete. Add the following CSS code to the./src/index.cssFile to apply some styles to theinformation boxComponent. You can also move your InfoBox-related CSS to a separate file if you want. we will use thoseindex.cssFile for demo purposes.

body { border: 0; Font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans serif; -Webkit font smoothing: antialiasing; -moz-osx-font-smoothing: grayscale;}.container { display: flex; justify-content: center; padding-top: 40vh;}.container .info-box-wrapper { position: relative;}.container .info-box { user selection: none; Width: 300px; Background: #ffc00d; Font size: 14px; Padding: 12px; box shadow: 2px 2px 12px rgba(0, 0, 0, 0,2); border radius: 4px; top: 20px; location: absolute;}

Lastly, update yours../src/App.jsFile with the following code for our main application to work.

import { useState } from 'react'; import {InfoBox} from './components/InfoBoxFunctional.js'; function App() { let [showInfo1, setShowInfo1] = useState(false); return ( <div className="container"> <div className="info-box-wrapper"> <button onClick={() => {setShowInfo1(true)}} style={{marginRight: '4px'}}> Wichtigste Funktion von InfoBox</button> <InfoBox show={showInfo1} onClickOutside={() => {setShowInfo1(false)}} message="Click outside to close"/> </div> </div> ); } export application pattern;

The above code shows a button with a click action that opens the infobox. EITHERinformation boxThe component is reusable (you can create many infoboxes) and, as always, we pass it the necessary accessories.

See how the app runs below. We can close the InfoBox instance by clicking outside of it. Also, it doesn't disappear when you click a button or component.

Detecting an external click of a class-based component

The class-based component approach is very similar to the functional component approach. We use the same props, DOM APIs, and implementation logic, but we have to write our code in a class-based style. Add the following code./src/components/InfoBoxClassBased.js.

importar React desde 'react'; Exportar Klasse InfoBox erweitert React.Component { constructor(props) { super(props); this.ref = React.createRef(); this.handleClickOutside = this.handleClickOutside.bind(this); } handleClickOutside(evento) { if (this.ref.current && !this.ref.current.contains(event.target)) { this.props.onClickOutside && this.props.onClickOutside(); } }; componentDidMount() { document.addEventListener('click', this.handleClickOutside, true); } componentWillUnmount() { document.removeEventListener('click', this.handleClickOutside, true); }; render () { if (! this.props.show) null zurückgeben; return ( <div ref={this.ref} className='info-box'> {this.props.message} </div>); }}

The code snippet above is similar to the function component code, but there are a few differences. We use for exampleReact.CreateRefinstead ofuseRefhook because weReact Hooks cannot be used with class-based components.

update yours nowApplication.jsAdd your new component references as shown below. Note that in the demo app we use both functional and class-based components, but feel free to just use the class-based implementation if you like.

Let's take a look at how the application runs again. There are now two instances of the InfoBox: the class-based implementation and the functional implementation.

Here we use theCliqueevent to bind click event listeners. You can also use themouse downevent according to your wishes. you can find themFull source code on my GitHub.

Respond outside the click handler - an alternative method

As I mentioned earlier, you can easily add this external click detection code to any of your React components. The implementation consists of some DOM API function calls and React API uses. But nowadays we have npm libraries for literally everything we can think of related to React, including several libraries for this scenario. If you need to add this external click detection logic to many components and don't want to implement it yourself, you can use a library. EITHERReact outside click handleris a very popular library for handling external click events. As with any other npm library, this also affects the production package size a bit. The React Outside Click Handler increases the size of the production package by around 20KB. Let's update our project with this npm library. Let's modify the functional and class-based components by adding references to this npm library. Copy your current project to another directory and rename it toreact-off-click-lib🇧🇷 Install the npm library with the following command.

Add react thread outside click handler

Update both components. First add the following code./src/components/InfoBoxFunctional.js.

export function InfoBox(props) { if(!props.show) return null; return ( <div className='info-box'> {props.message} </div>);}

After that you can add the following code./src/components/InfoBoxClassBased.js.

Reaccionar de 'reaccionar' importieren; Klasse InfoBox exportieren React.Component { render() { if(!this.props.show) return null; return ( <div className='info-box'> {this.props.message} </div>); }}

As you can see now, we don't have our own third-party click detection implementation in any of the components. Let's use the npm library to re-enable the external click detection feature.

update yoursApplication.jswith the following code.

Import { useState } from 'react'; import {InfoBox as InfoBox1} from './components/InfoBoxFunctional.js'; import {InfoBox as InfoBox2} from './components/InfoBoxClassBased.js'; import OutsideClickHandler from 'react-outside -click-handler';Función App() { let [showInfo1, setShowInfo1] = useState(false); let [showInfo2, setShowInfo2] = useState(false);return ( <div className="container"> <div className="info-box-wrapper"> <button onClick={() => {setShowInfo1(true)}} style={{marginRight: '4px'}}>Show functional information table</button> <OutsideClickHandler onOutsideClick={() => {setShowInfo1(false)}}> <InfoBox1 show={showInfo1} message="To close outside click here"/> </OutsideClickHandler> </div> <div className="info-box-wrapper"> <button onClick={() => {setShowInfo2(true)}}>Show information table based on class</button > <OutsideClickHandler onOutsideClick={() => {setShowInfo2(false)}}> <InfoBox2 show={showInfo2} message="Click to close"/> </OutsideClickHandler> </div> </ div> ); } export predetermined application;

Here we package our InfoBox components with theexternal click handlercomponent defined in the library. we can use thoseonOutsideClickprop to pass a callback to execute some code when the user clicks outside of the specific component.

Take a look at the running app below. You'll see the same app as before, but this time we're using a third-party library.

you can find themFull source code on my GitHub.

conclusion

External click detection is useful in various UI elements such as popups, dropdowns, and menus. Web developers often tend to embed libraries even for simple things that they can implement themselves. Adding too many dependencies can slow down your web application, make the package size unmanageable, and make your code base less maintainable.

So it's best if you can implement this external click detection yourself, but if you can't, after all we need fast feature implementations for web apps, it's no problem if you integrate them.Library React external click controlleras it only slightly increases the size of the production package by just 20 kilobytes.