https://github.com/felipethome/react-outside-click

React component to track clicks that happened outside of it
https://github.com/felipethome/react-outside-click

browser callback events react

Last synced: about 5 hours ago
JSON representation

React component to track clicks that happened outside of it

• Host: GitHub
• URL: https://github.com/felipethome/react-outside-click
• Owner: felipethome
• License: bsd-3-clause
• Created: 2016-06-01T17:17:14.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-23T09:03:39.000Z (about 7 years ago)
• Last Synced: 2024-11-06T10:02:20.566Z (11 days ago)
• Topics: browser, callback, events, react
• Language: JavaScript
• Homepage:
• Size: 478 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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 (

          


            

              
Click here

            

          

        );

      }

    });


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