### Install react-onclickoutside HoC via npm

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

Installs the react-onclickoutside Higher Order Component (HoC) using npm. This installation method is recommended for projects still using React's Component class extensions.

```shell
$> npm install react-onclickoutside --save
```

--------------------------------

### CSS Styling for Concentric Circles and Labels

Source: https://github.com/pomax/react-onclickoutside/blob/master/test/browser/index.html

Provides CSS rules for `html`, `body`, and `.concentric` elements, defining their layout, dimensions, background, and text styling. It includes a `.highlight` state for visual feedback and absolute positioning for labels within the circles.

```css
html, body { width: 100%; margin: 0; padding: 0; }
.concentric { width: 90%; height: 90%; padding: 5% 5%; background: rgba(0,0,0,0.4); border-radius: 100%; position: relative; }
.concentric.highlight { background: rgba(255,255,0,0.5); }
.concentric .label { position: absolute; top: 50%; left: 50%; color: white; }
.concentric.highlight .label { color: black; }
hr { margin: 2em 0; }
```

--------------------------------

### React CommonJS: OnClickOutside with createReactClass

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

Illustrates how to use the `react-onclickoutside` library in a CommonJS environment. It shows the `require` syntax and how to wrap a component created with `createReactClass`, noting the necessary `.default` property due to ES6 module bundling.

```javascript
// .default is needed because library is bundled as ES6 module
var onClickOutside = require("react-onclickoutside").default;
var createReactClass = require("create-react-class");

// create a new component, wrapped by this onclickoutside HOC:
var MyComponent = onClickOutside(
  createReactClass({
    // ...,
    handleClickOutside: function(evt) {
      // ...handling code goes here...
    }
    // ...
  })
);
```

--------------------------------

### API Reference for react-onclickoutside HOC

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

Overview of methods and properties available for configuring the `react-onclickoutside` Higher-Order Component.

```APIDOC
Methods:
  enableOnClickOutside(): Enables outside click listening by setting up event bindings.
  disableOnClickOutside(): Disables outside click listening by explicitly removing event bindings.

Properties:
  disableOnClickOutside: boolean
    Purpose: Initially disables outside click listening when set to true.
    Usage: Pass as a prop to the wrapped component.
  excludeScrollbar: boolean
    Purpose: When true, clicks on the scrollbar are ignored by the HOC.
    Usage: Pass as a prop to the wrapped component or in the HOC configuration object.
  preventDefault: boolean
    Purpose: Controls whether evt.preventDefault() is called on the event before it hits handleClickOutside(evt).
    Usage: Pass as a prop to the wrapped component.
    Note: Use with caution.
  stopPropagation: boolean
    Purpose: Controls whether evt.stopPropagation() is called on the event before it hits handleClickOutside(evt).
    Usage: Pass as a prop to the wrapped component.
    Note: May not behave as expected due to multiple event listeners.
  outsideClickIgnoreClass: string
    Purpose: Specifies a CSS class name for elements that should be ignored during outside click detection.
    Default: 'ignore-react-onclickoutside'
    Usage: Pass as a prop to the wrapped component.
```

--------------------------------

### Accessing Wrapped Component Instance (getInstance)

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

Demonstrates how to access the underlying component instance wrapped by the `react-onclickoutside` HOC. By using the `getInstance()` method on the component's ref, developers can call custom functions or access the API of the original component. This snippet shows a `Container` component rendering an `EnhancedComponent` and then calling a method on the wrapped `MyComponent` instance.

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

class MyComponent extends Component {
  // ...
  handleClickOutside(evt) {
    // ...
  }
  ...
}
var EnhancedComponent = onClickOutside(MyComponent);

class Container extends Component {
  constructor(props) {
    super(props);
    this.getMyComponentRef = this.getMyComponentRef.bind(this);
  }

  someFunction() {
    var ref = this.myComponentRef;
    // 1) Get the wrapped component instance:
    var superTrueMyComponent = ref.getInstance();
    // and call instance functions defined for it:
    superTrueMyComponent.customFunction();
  }

  getMyComponentRef(ref) {
    this.myComponentRef = ref;
  }

  render(evt) {
    return <EnhancedComponent disableOnClickOutside={true} ref={this.getMyComponentRef}/>
  }
}
```

--------------------------------

### React OnClickOutside: Custom Handler Configuration

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

Explains how to specify a custom event handler function for `react-onclickoutside` when the default `handleClickOutside` method name is not desired. This is achieved by passing a configuration object as the second argument to the HoC, which includes a `handleClickOutside` property returning the desired instance method.

```javascript
// load the HOC:
import React, { Component } from "react";
import onClickOutside from "react-onclickoutside";

// create a new component, wrapped below by onClickOutside HOC:
class MyComponent extends Component {
  // ...
  myClickOutsideHandler(evt) {
    // ...handling code goes here...
  }
  // ...
}
var clickOutsideConfig = {
  handleClickOutside: function(instance) {
    return instance.myClickOutsideHandler;
  }
};
var EnhancedComponent = onClickOutside(MyComponent, clickOutsideConfig);
```

--------------------------------

### React Functional Component: Implementing Outside Click with Custom Hook

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

Demonstrates how to integrate the `listenForOutsideClicks` helper function into a React functional component. It utilizes `useState` for managing component visibility and a `useRef` to reference the DOM element, with `useEffect` handling the event listener lifecycle for outside clicks.

```javascript
import React, { useEffect, useState, useRef } from "react";
import listenForOutsideClicks from "./somewhere";

const Menu = () => {
  const menuRef = useRef(null);
  const [listening, setListening] = useState(false);
  const [isOpen, setIsOpen] = useState(false);  
  const toggle = () => setIsOpen(!isOpen);

  useEffect(listenForOutsideClick(
    listening,
    setListening,
    menuRef,
    // let's say our custom handler closes our menu on an outside click:
    () => setIsOpen(false),
  ));

  return (
    <div ref={menuRef} className={isOpen ? "open" : "hidden"}>
      <h1 onClick={toggle}>...</h1>
      <ul>...</ul>
    </div>
  );
};

export default Menu;
```

--------------------------------

### React ES6 Class Component: Basic OnClickOutside Implementation

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

This snippet demonstrates the basic usage of the `react-onclickoutside` Higher-Order Component (HoC) with an ES6 React class component. The HoC automatically detects and calls the `handleClickOutside` method when an outside click occurs.

```javascript
import React, { Component } from "react";
import onClickOutside from "react-onclickoutside";

class MyComponent extends Component {
  handleClickOutside = evt => {
    // ..handling code goes here...
  };
}

export default onClickOutside(MyComponent);
```

--------------------------------

### JavaScript: Custom Hook Helper for Outside Clicks

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

This JavaScript function provides the core logic for detecting clicks outside a specified DOM element. It uses `document.addEventListener` to listen for 'click' and 'touchstart' events, returning a cleanup function. It's designed to be integrated with React's `useEffect` hook in functional components.

```javascript
function listenForOutsideClicks(listening, setListening, menuRef, yourClickHandler) {
  return () => {
    if (listening) return;
    if (!menuRef.current) return;
    setListening(true);
    [`click`, `touchstart`].forEach((type) => {
      document.addEventListener(type, (evt) => {
        if (menuRef.current.contains(evt.target)) return;
        yourClickHandler();
      });
    });
  }
}
```

--------------------------------

### React OnClickOutside: Specifying Custom Event Types

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

Demonstrates how to customize the DOM event types that `react-onclickoutside` listens for to detect outside clicks. By default, it listens for `mousedown` and `touchstart`. This can be overridden by passing a single event name string or an array of event names to the `eventTypes` prop.

```javascript
<MyComponent eventTypes="click" ... />
<MyComponent eventTypes={["click", "touchend"]} ... />
```

--------------------------------

### Configure Default Scrollbar Exclusion for HOC

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

Illustrates how to set `excludeScrollbar: true` as a default behavior for all instances of a component by passing a configuration object as the second parameter to the `onClickOutside` HOC. This provides a global setting for the component type.

```js
import React, { Component } from "react";
import onClickOutside from "react-onclickoutside";

class MyComponent extends Component {
  // ...
}
var clickOutsideConfig = {
  excludeScrollbar: true
};
var EnhancedComponent = onClickOutside(MyComponent, clickOutsideConfig);
```

--------------------------------

### IE11 SVG classList Polyfill

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

Provides a JavaScript polyfill to address the lack of `classList` support for SVG elements in Internet Explorer 11. This shim adds a `classList` getter to `SVGElement.prototype`, allowing `contains` checks on SVG elements' `className.baseVal` property. It should be loaded before React code to ensure proper functionality across libraries.

```javascript
if (!("classList" in SVGElement.prototype)) {
  Object.defineProperty(SVGElement.prototype, "classList", {
    get() {
      return {
        contains: className => {
          return this.className.baseVal.split(" ").indexOf(className) !== -1;
        }
      };
    }
  });
}
```

--------------------------------

### Disable Outside Click Listening on Component Mount

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

Demonstrates how to initially disable outside click listening for a wrapped component by passing `disableOnClickOutside={true}` as a prop. This prevents the HOC from setting up event listeners until explicitly enabled via `enableOnClickOutside()`.

```js
import React, { Component } from "react";
import onClickOutside from "react-onclickoutside";

class MyComponent extends Component {
  // ...
  handleClickOutside(evt) {
    // ...
  }
  // ...
}
var EnhancedComponent = onClickOutside(MyComponent);

class Container extends Component {
  render(evt) {
    return <EnhancedComponent disableOnClickOutside={true} />;
  }
}
```

--------------------------------

### Exclude Scrollbar Clicks from Outside Detection

Source: https://github.com/pomax/react-onclickoutside/blob/master/README.md

Shows how to configure the HOC to ignore clicks that occur on the scrollbar by setting the `excludeScrollbar={true}` property on the wrapped component. This is useful when scrollbar clicks should not trigger the `handleClickOutside` event.

```js
import React, { Component } from "react";
import onClickOutside from "react-onclickoutside";

class MyComponent extends Component {
  // ...
}
var EnhancedComponent = onClickOutside(MyComponent);

class Container extends Component {
  render(evt) {
    return <EnhancedComponent excludeScrollbar={true} />;
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.