react-onclickoutside

What is react-onclickoutside?

The react-onclickoutside npm package is a React component wrapper that provides functionality to detect clicks outside of the component it wraps. It is commonly used to handle scenarios like closing dropdown menus, modals, or any floating elements when a user clicks outside of these components.

What are react-onclickoutside's main functionalities?

Detecting clicks outside a component

This feature allows you to wrap any React component with the react-onclickoutside higher-order component (HOC) to detect and handle clicks outside of it. In the code sample, `MyComponent` is wrapped with `onClickOutside`, enabling it to handle clicks that occur outside of its bounds.

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

class MyComponent extends Component {
  handleClickOutside = evt => {
    // handle click outside logic here
  };

  render() {
    return <div>My Component</div>;
  }
}

export default onClickOutside(MyComponent);

Other packages similar to react-onclickoutside

react-click-outside

Similar to react-onclickoutside, this package provides functionality to detect clicks outside of a component. It differs in implementation, as it uses a mixin approach for React classes or a decorator for React components, which might not be as straightforward as the HOC approach used by react-onclickoutside.

react-outside-click-handler

This package offers a similar functionality to react-onclickoutside, with the added benefit of being able to handle clicks outside of multiple elements. It wraps components in a div to detect outside clicks, which can be more flexible but might introduce additional markup into the DOM.

README

An onClickOutside mixin for React components

installation

If you have Node.js needs, you can install this mixin via npm, using:

npm install react-onclickoutside --save

(or --save-dev depending on your needs). You then then use it in your components as:

var Component = React.createClass({
  mixins: [
    require('react-onclickoutside')
  ],

  onClickOutside: function(evt) {
    // ...handling code goes here...
  }
});

via bower, using bower install react-onclickoutside, and then include it as script via:

<script src="bower_components/react-onclickoutside/index.js"></script>

Then use it as:

var Component = React.createClass({
  mixins: [
    Onclickoutside
  ],

  onClickOutside: function(evt) {
    // ...handling code goes here...
  }
});

For bugs and enhancements hit up https://github.com/Pomax/react-onclickoutside/issues