{"library":"react-onclickoutside","title":"React On Click Outside HOC","description":"react-onclickoutside is a Higher Order Component (HOC) for React class components, currently at version 6.13.2. It enables wrapped components to detect and respond to click events that occur anywhere in the document outside their own DOM element, commonly used for dismissing menus, modals, or dropdowns. While it supports React versions 15.5.x through 18.x, the library's documentation explicitly recommends against its use with modern React functional components and hooks, suggesting manual implementation of `useRef` and `useEffect` instead. The project indicates it requires community support for continued maintenance. It relies on the `.classList` property, necessitating a polyfill like `dom4` for compatibility with older browsers like Internet Explorer. Releases are irregular, with the last major refactor to ES6 classes occurring in v6.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install react-onclickoutside"],"cli":null},"imports":["import onClickOutside from 'react-onclickoutside';","import { IGNORE_CLASS_NAME } from 'react-onclickoutside';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Component } from 'react';\nimport onClickOutside from 'react-onclickoutside';\n\nclass DropdownMenu extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { isOpen: false };\n    this.toggleMenu = this.toggleMenu.bind(this);\n  }\n\n  toggleMenu() {\n    this.setState(prevState => ({ isOpen: !prevState.isOpen }));\n  }\n\n  // This method is required by react-onclickoutside HOC\n  handleClickOutside = (evt) => {\n    // console.log('Clicked outside!', evt.target);\n    if (this.state.isOpen) {\n      this.setState({ isOpen: false });\n    }\n  };\n\n  render() {\n    return (\n      <div style={{ position: 'relative', display: 'inline-block' }}>\n        <button onClick={this.toggleMenu}>Toggle Dropdown</button>\n        {this.state.isOpen && (\n          <div\n            style={{\n              position: 'absolute',\n              backgroundColor: '#f9f9f9',\n              minWidth: '160px',\n              boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',\n              zIndex: 1,\n              padding: '12px 16px',\n              marginTop: '5px'\n            }}\n          >\n            <a href=\"#\" style={{ display: 'block', textDecoration: 'none', color: 'black' }}>Link 1</a>\n            <a href=\"#\" style={{ display: 'block', textDecoration: 'none', color: 'black' }}>Link 2</a>\n            <a href=\"#\" style={{ display: 'block', textDecoration: 'none', color: 'black' }}>Link 3</a>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default onClickOutside(DropdownMenu);","lang":"typescript","description":"This quickstart demonstrates how to use the `onClickOutside` HOC with an ES6 class component to create a dropdown menu that closes when a user clicks anywhere outside of it. The `handleClickOutside` method is a mandatory implementation for components wrapped by this HOC.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}