React On Click Outside HOC

Common errors

• Error: Component must implement a handleClickOutside method or pass a handler in the config object.

  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.
  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.

• TypeError: Cannot read property 'classList' of undefined (or null)

  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.
  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.

• Module not found: Can't resolve 'react-onclickoutside'

  cause This usually indicates incorrect import syntax, a missing dependency in `package.json`, or a problem with module resolution in your bundler.
  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;`

• Trying to use `onClickOutside` with functional components or hooks, but it's not working as expected.

  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.
  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.

Warnings

• deprecated 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.
  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`).
• maintenance 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.
  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.
• gotcha 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.
  Fix: Include a `classList` polyfill (e.g., `dom4`) in your project if you need to support environments that lack native `classList` support.
• breaking 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).
  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.
• breaking 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.
  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.

Install

• npm install react-onclickoutside npm
• yarn add react-onclickoutside yarn
• pnpm add react-onclickoutside pnpm

Imports

• onClickOutside
  wrong:

  import { onClickOutside } from 'react-onclickoutside';
  const onClickOutside = require('react-onclickoutside');

  correct:

  import onClickOutside from 'react-onclickoutside';

  The primary export is a default export, a Higher Order Component. For CommonJS, use `.default` as the library is bundled as an ES6 module.
• IGNORE_CLASS_NAME
  wrong:

  const IGNORE_CLASS_NAME = 'ignore-react-onclickoutside';

  correct:

  import { IGNORE_CLASS_NAME } from 'react-onclickoutside';

  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.

Quickstart

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.

import React, { Component } from 'react';
import onClickOutside from 'react-onclickoutside';

class DropdownMenu extends Component {
  constructor(props) {
    super(props);
    this.state = { isOpen: false };
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu() {
    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
  }

  // This method is required by react-onclickoutside HOC
  handleClickOutside = (evt) => {
    // console.log('Clicked outside!', evt.target);
    if (this.state.isOpen) {
      this.setState({ isOpen: false });
    }
  };

  render() {
    return (
      <div style={{ position: 'relative', display: 'inline-block' }}>
        <button onClick={this.toggleMenu}>Toggle Dropdown</button>
        {this.state.isOpen && (
          <div
            style={{
              position: 'absolute',
              backgroundColor: '#f9f9f9',
              minWidth: '160px',
              boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
              zIndex: 1,
              padding: '12px 16px',
              marginTop: '5px'
            }}
          >
            <a href="#" style={{ display: 'block', textDecoration: 'none', color: 'black' }}>Link 1</a>
            <a href="#" style={{ display: 'block', textDecoration: 'none', color: 'black' }}>Link 2</a>
            <a href="#" style={{ display: 'block', textDecoration: 'none', color: 'black' }}>Link 3</a>
          </div>
        )}
      </div>
    );
  }
}

export default onClickOutside(DropdownMenu);