Skip to content
Sandny Blog
  • Home
  • Java
  • JavaScript
  • AWS
  • Embedded
  • About
Multiple refs for an array of React Elements JavaScript

How to dismiss dropdowns when pressed on background with…

  • July 4, 2021July 11, 2021
  • by Coder Kai

React components offer many advantages to break the code and implement web features. But when it comes to some features it could bit difficult to make it work. One such problem would be to listen to document click events and making the changes to components like dismissing dropdowns when pressed on the background.

1. How to listen to the click event globally

Using DOM global object document we can listen to the events of the root document. For that we can use addEventListener function to add a callback function to DOM events.

    const handleClick = (event) => {
      console.log('On click the document');
    }
    document.addEventListener('click', handleClick);
    // to remove teh listener
    document.removeEventListener('click', handleClick);

2. Using useEffect to handle an event in component

We can utilize this DOM listener to handle click events and dismiss the Dropdown component.
For this we need to define a function to update the state. This state variable can be used to dismiss the dropdown.

  const [showDropdown, setShowDropdown] = useState(false);

  const handleClick = useCallback(() => {
    showDropdown && setShowDropdown(false);
  }, [setShowDropdown]);

  useEffect(() => {
    document.addEventListener('click', handleClick);

    return () => {
      document.removeEventListener('click', handleClick);
    }
  }, [handleClick]);

.... 

  return (
   <Dropdown onPress=(() => setShowDropdown(!showDropdown)) />
  )

There are few important points in the above code.

The useCallback is used to memoize and initialize the function once when the state is changed.

Then the useEffect needs the event of callback variable to a dependency.
This will allow the showDropdown state variable to be available in the scope of the callback function when the variable is updated. Unless the callback function always has the initial value of the showDropdown state.

Then we need to remove the listener when the event is over. For that the removeEventListener function will be returned as the callback from the useEffect function.

You can find more information regarding the event listener from the MDN documents.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

03. Javascript Guide – Strings
Minimum supported Gradle version is 7.0. Current version is 6.5
Coder Kai
A humble developer
dismiss drop down react react dropdowns react modals usecallback useEffect

Related articles

Multiple refs for an array of React Elements
Using multiple refs for an…
Immutable and Mutable Values in Javascript
07. Immutable and Mutable Values…
wrapper objects in javascript
06. Wrapper objects in Javascript
globals undefined and null values in javascript
05 Global, null and undefined…
Javascript Booleans and Equality
04. Javascript Guide Booleans and…
How to add Chakra UI Animations
Chakra UI Animations
SSL Websocket using Nginx Proxy
SSL Websocket proxy with Nginx…
Change python version correctly
Python is not setting correct…
optimize React.js load time
How to optimize React.js app…
Multiple refs for an array of React Elements
How to use IntersectionObserver to…
Javascript guide Strings
03. Javascript Guide – Strings
How to fetch data with useEffect
How to fetch data with…
add styles to stripe elements
How to add styles to…
Typescript
How to use Typescript with…
how to optimize react-native map view
How to optimize react-native map…
debounce with react hooks
Avoid multiple clicks using debounce…
Numbers inJavascript
02. Javascript Guide – Numbers
Introduction to Javascript
01. Javascript Guide – Introduction…
Nginx Load Balancer with docker…
Create React App Using npx

Categories

  • android 3
  • Apollo Client 1
  • AWS 8
    • AppSync 5
    • EC2 1
    • EKS 1
    • Route53 1
    • S3 1
  • AWS Amplify 1
  • Chakra UI 1
  • Docker 1
  • Embedded 1
  • EmberJS 1
  • FCM 1
  • Godaddy 1
  • GraphQL 3
  • ios 1
  • Jasper 1
  • Java 10
    • Java 11 1
    • Java 14 1
  • JavaEE 2
  • JavaScript 39
    • Express.js 4
    • Javascript Guide 7
    • Node.js 3
    • react-native 4
    • React.js 17
    • Typescript 1
  • Kubernetes 1
  • machine learning 1
  • Maven 2
  • OCaml 3
  • PostgreSQL 1
  • Python 2
  • react-native 4
  • ReactJS 3
  • sass 1
  • Server 6
  • spark 1
  • Terraform 2
  • Ubuntu 4
  • Uncategorized 1
  • webpack 2

Recent Comments

  • Pamela587 on Chakra UI Animations
  • Alicia1760 on Chakra UI Animations
  • vneuweluso on How to add styles to stripe elements without using CardElement

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Archives

  • October 2022 3
  • September 2022 7
  • May 2022 1
  • December 2021 1
  • August 2021 1
  • July 2021 6
  • June 2021 3
  • February 2021 1
  • July 2020 1
  • December 2019 5
  • November 2019 6
  • October 2019 3
  • August 2019 1
  • March 2019 1
  • February 2019 1
  • January 2019 2
  • December 2018 1
  • September 2018 2
  • August 2018 1
  • June 2018 1
  • February 2018 1
  • November 2017 2
  • October 2017 5
  • September 2017 1
  • June 2017 1
  • May 2017 10
Sandny Blog space
Theme by Colorlib Powered by WordPress