# react-outside-click

**Repository Path**: mirrors_gorangajic/react-outside-click

## Basic Information

- **Project Name**: react-outside-click
- **Description**: React component to track clicks that happened outside of it
- **Primary Language**: Unknown
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-24
- **Last Updated**: 2026-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React Outside Click

React component to track clicks that happened outside of it. You just wrap the components you want to track if a click happened outside and ReactOutsideClick will execute a callback that you defined.

[Demo](http://felipethome.github.io/react-outside-click/)

## How to install

    npm install react-outside-click

## How to use

Import the component to your project and then wrap the nodes you want to track if an outside click happened. Example:

    var React = require('react');
    var OutsideClick = require('react-outside-click');

    React.createClass({
      onOutsideClick: function (event) {
        console.log('click happened outside', event);
      },

      render: function () {
        var styles = {
          elem: {
            width: '100px',
            height: '50px',
            backgroundColor: '#F00',
          },
        };
        return (
          <div>
            <OutsideClick onOutsideClick={this._handleOutsideClick}>
              <div style={styles.elem}>Click here</div>
            </OutsideClick>
          </div>
        );
      }
    });

### Properties

Property name | Description
------------- | -----------
component | String. The component that will wrap all the children. Default: div
onOutsideClick | Function. Callback that will be called with the event object when an outside click happened.
useCapture | Boolean. If true, the internal logic of this component will use the capture phase. Default: false

## LICENSE

BSD-3