{"id":11822,"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.","status":"maintenance","version":"6.13.2","language":"javascript","source_language":"en","source_url":"https://github.com/Pomax/react-onclickoutside","tags":["javascript","react","onclick","outside","onclickoutside"],"install":[{"cmd":"npm install react-onclickoutside","lang":"bash","label":"npm"},{"cmd":"yarn add react-onclickoutside","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-onclickoutside","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component functionality.","package":"react","optional":false},{"reason":"Peer dependency for DOM manipulation and event binding.","package":"react-dom","optional":false}],"imports":[{"note":"The primary export is a default export, a Higher Order Component. For CommonJS, use `.default` as the library is bundled as an ES6 module.","wrong":"import { onClickOutside } from 'react-onclickoutside';\nconst onClickOutside = require('react-onclickoutside');","symbol":"onClickOutside","correct":"import onClickOutside from 'react-onclickoutside';"},{"note":"Exported constant for the CSS class name used to mark elements that should be ignored by the outside click detection logic. This constant was exposed as of v6.5.0.","wrong":"const IGNORE_CLASS_NAME = 'ignore-react-onclickoutside';","symbol":"IGNORE_CLASS_NAME","correct":"import { IGNORE_CLASS_NAME } from 'react-onclickoutside';"}],"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
\n \n {this.state.isOpen && (\n \n Link 1\n Link 2\n Link 3\n
\n )}\n \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."},"warnings":[{"fix":"For functional components, implement a custom hook using `useRef` and `useEffect` to manage outside click detection. Several alternative libraries also offer hook-based solutions (e.g., `react-cool-onclickoutside`, `@custom-react-hooks/use-click-outside`).","message":"This HOC is not recommended for use with modern React functional components and hooks. The project documentation explicitly advises against installing it if you are using hooks and suggests implementing the logic manually with `useRef` and `useEffect` instead.","severity":"deprecated","affected_versions":">=6.0.0"},{"fix":"Evaluate the project's long-term viability for new applications. For existing applications, consider contributing to its maintenance or migrating to an actively developed alternative, especially if using functional components and hooks.","message":"The project is currently in maintenance mode, and the README indicates it 'needs your support to stay maintained'. This suggests a potential for slower development, bug fixes, or eventual abandonment without community funding.","severity":"maintenance","affected_versions":">=6.0.0"},{"fix":"Include a `classList` polyfill (e.g., `dom4`) in your project if you need to support environments that lack native `classList` support.","message":"The HOC relies on the `.classList` DOM property. Older browsers, particularly Internet Explorer (pre-Edge) and some older SVG implementations in IE, do not fully support `classList`, which can lead to unexpected behavior or errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update existing components from `createClass` or mixin patterns to ES6 class components. Ensure `handleClickOutside` is defined as a class method or passed via configuration.","message":"Version 6.0.0 refactored the library to use ES6 class syntax, discontinuing the `createClass` and mixin patterns used in older versions (e.g., v4.x, v5.x).","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Review how touch events are handled in your application, especially if `preventDefault` is used or if you experience unexpected scrolling or touch interaction behavior. Adjust `preventDefault` prop or event listener options if necessary.","message":"As of v6.0.0, explicit `passive` settings for touch events are passed, based on the `preventDefault` prop. This can alter the default behavior of touch event handling.","severity":"breaking","affected_versions":">=6.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your wrapped class component includes a `handleClickOutside = (event) => { /* ... */ };` method. Alternatively, pass a `handleClickOutside` function as the second argument to `onClickOutside(MyComponent, { handleClickOutside: myCustomHandler })` for more explicit control, especially in TypeScript.","cause":"The component wrapped by `onClickOutside` does not define a `handleClickOutside` method as a class member, or a custom handler was not provided in the HOC's configuration.","error":"Error: Component must implement a handleClickOutside method or pass a handler in the config object."},{"fix":"Install and include a `classList` polyfill (e.g., `dom4`) in your project to ensure compatibility across all target browsers. For SVG elements in older IE, manual DOM manipulation or ensuring `classList` polyfill covers SVG might be necessary.","cause":"An element being clicked, or an element in its ancestry, does not have a `classList` property, often due to an older browser (like IE) or attempting to access it on an SVG element in an unsupported environment.","error":"TypeError: Cannot read property 'classList' of undefined (or null)"},{"fix":"Verify that `react-onclickoutside` is installed via `npm install react-onclickoutside`. Ensure the import statement is `import onClickOutside from 'react-onclickoutside';` as it is a default export. For CommonJS, use `const onClickOutside = require('react-onclickoutside').default;`","cause":"This usually indicates incorrect import syntax, a missing dependency in `package.json`, or a problem with module resolution in your bundler.","error":"Module not found: Can't resolve 'react-onclickoutside'"},{"fix":"For functional components, implement a custom hook using `useRef` and `useEffect` to detect outside clicks. This involves attaching a ref to your component and an event listener to the document, checking if the clicked target is outside the ref's current element.","cause":"The `react-onclickoutside` library is a HOC designed for React class components and does not directly support React hooks or functional components in the same way modern hook-based solutions do.","error":"Trying to use `onClickOutside` with functional components or hooks, but it's not working as expected."}],"ecosystem":"npm"}