Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-onclickoutside

Package Overview
Dependencies
Maintainers
2
Versions
79
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-onclickoutside - npm Package Compare versions

Comparing version 6.4.0 to 6.4.1-0

es/dom-helpers.js
es/uid.js
lib/dom-helpers.js
lib/uid.js

274

es/index.js

@@ -1,3 +0,1 @@

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -19,2 +17,5 @@

var touchEvents = ['touchstart', 'touchmove'];
export var IGNORE_CLASS_NAME = 'ignore-react-onclickoutside';
/**

@@ -34,4 +35,2 @@ * This function generates the HOC function that you'll use

function onClickOutside() {
var _ref;
var _temp, _this, _ret;

@@ -45,3 +44,3 @@

return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = onClickOutside.__proto__ || Object.getPrototypeOf(onClickOutside)).call.apply(_ref, [this].concat(args))), _this), _this.__outsideClickHandler = null, _this.enableOnClickOutside = function () {
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.__outsideClickHandler = null, _this.enableOnClickOutside = function () {
var fn = _this.__outsideClickHandler;

@@ -53,4 +52,11 @@ if (fn && typeof document !== 'undefined') {

}
events.forEach(function (eventName) {
var handlerOptions = !_this.props.preventDefault && ['touchstart', 'touchmove'].indexOf(eventName) !== -1 ? { passive: true } : null;
var handlerOptions = null;
var isTouchEvent = touchEvents.indexOf(eventName) !== -1;
if (isTouchEvent) {
handlerOptions = { passive: !_this.props.preventDefault };
}
document.addEventListener(eventName, fn, handlerOptions);

@@ -75,173 +81,157 @@ });

_createClass(onClickOutside, [{
key: 'getInstance',
/**
* Access the WrappedComponent's instance.
*/
onClickOutside.prototype.getInstance = function getInstance() {
if (!WrappedComponent.prototype.isReactComponent) {
return this;
}
var ref = this.instanceRef;
return ref.getInstance ? ref.getInstance() : ref;
};
// this is given meaning in componentDidMount/componentDidUpdate
/**
* Access the WrappedComponent's instance.
*/
value: function getInstance() {
if (!WrappedComponent.prototype.isReactComponent) {
return this;
}
var ref = this.instanceRef;
return ref.getInstance ? ref.getInstance() : ref;
/**
* Add click listeners to the current document,
* linked to this component's state.
*/
onClickOutside.prototype.componentDidMount = function componentDidMount() {
// If we are in an environment without a DOM such
// as shallow rendering or snapshots then we exit
// early to prevent any unhandled errors being thrown.
if (typeof document === 'undefined' || !document.createElement) {
return;
}
// this is given meaning in componentDidMount/componentDidUpdate
var instance = this.getInstance();
}, {
key: 'componentDidMount',
/**
* Add click listeners to the current document,
* linked to this component's state.
*/
value: function componentDidMount() {
// If we are in an environment without a DOM such
// as shallow rendering or snapshots then we exit
// early to prevent any unhandled errors being thrown.
if (typeof document === 'undefined' || !document.createElement) {
return;
if (config && typeof config.handleClickOutside === 'function') {
this.__clickOutsideHandlerProp = config.handleClickOutside(instance);
if (typeof this.__clickOutsideHandlerProp !== 'function') {
throw new Error('WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.');
}
var instance = this.getInstance();
if (config && typeof config.handleClickOutside === 'function') {
this.__clickOutsideHandlerProp = config.handleClickOutside(instance);
if (typeof this.__clickOutsideHandlerProp !== 'function') {
throw new Error('WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.');
}
} else if (typeof instance.handleClickOutside === 'function') {
if (Component.prototype.isPrototypeOf(instance)) {
this.__clickOutsideHandlerProp = instance.handleClickOutside.bind(instance);
} else {
this.__clickOutsideHandlerProp = instance.handleClickOutside;
}
} else if (typeof instance.props.handleClickOutside === 'function') {
this.__clickOutsideHandlerProp = instance.props.handleClickOutside;
} else if (typeof instance.handleClickOutside === 'function') {
if (Component.prototype.isPrototypeOf(instance)) {
this.__clickOutsideHandlerProp = instance.handleClickOutside.bind(instance);
} else {
throw new Error('WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.');
this.__clickOutsideHandlerProp = instance.handleClickOutside;
}
} else if (typeof instance.props.handleClickOutside === 'function') {
this.__clickOutsideHandlerProp = instance.props.handleClickOutside;
} else {
throw new Error('WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.');
}
// TODO: try to get rid of this, could be done with function ref, might be problematic for SFC though, they do not expose refs
if (findDOMNode(instance) === null) {
return;
}
this.addOutsideClickHandler();
// TODO: try to get rid of this, could be done with function ref, might be problematic for SFC though, they do not expose refs
if (findDOMNode(instance) === null) {
return;
}
/**
* Track for disableOnClickOutside props changes and enable/disable click outside
*/
this.addOutsideClickHandler();
};
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.props.disableOnClickOutside && !nextProps.disableOnClickOutside) {
this.enableOnClickOutside();
} else if (!this.props.disableOnClickOutside && nextProps.disableOnClickOutside) {
this.disableOnClickOutside();
}
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
var componentNode = findDOMNode(this.getInstance());
/**
* Track for disableOnClickOutside props changes and enable/disable click outside
*/
if (componentNode === null && this.__outsideClickHandler) {
this.removeOutsideClickHandler();
return;
}
if (componentNode !== null && !this.__outsideClickHandler) {
this.addOutsideClickHandler();
return;
}
onClickOutside.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.props.disableOnClickOutside && !nextProps.disableOnClickOutside) {
this.enableOnClickOutside();
} else if (!this.props.disableOnClickOutside && nextProps.disableOnClickOutside) {
this.disableOnClickOutside();
}
};
/**
* Remove all document's event listeners for this component
*/
onClickOutside.prototype.componentDidUpdate = function componentDidUpdate() {
var componentNode = findDOMNode(this.getInstance());
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (componentNode === null && this.__outsideClickHandler) {
this.removeOutsideClickHandler();
return;
}
/**
* Can be called to explicitly enable event listening
* for clicks and touches outside of this element.
*/
if (componentNode !== null && !this.__outsideClickHandler) {
this.addOutsideClickHandler();
return;
}
};
/**
* Remove all document's event listeners for this component
*/
/**
* Can be called to explicitly disable event listening
* for clicks and touches outside of this element.
*/
}, {
key: 'addOutsideClickHandler',
value: function addOutsideClickHandler() {
var fn = this.__outsideClickHandler = generateOutsideCheck(findDOMNode(this.getInstance()), this.__clickOutsideHandlerProp, this.props.outsideClickIgnoreClass, this.props.excludeScrollbar, this.props.preventDefault, this.props.stopPropagation);
onClickOutside.prototype.componentWillUnmount = function componentWillUnmount() {
this.removeOutsideClickHandler();
};
var pos = registeredComponents.length;
registeredComponents.push(this);
handlers[pos] = fn;
/**
* Can be called to explicitly enable event listening
* for clicks and touches outside of this element.
*/
// If there is a truthy disableOnClickOutside property for this
// component, don't immediately start listening for outside events.
if (!this.props.disableOnClickOutside) {
this.enableOnClickOutside();
}
/**
* Can be called to explicitly disable event listening
* for clicks and touches outside of this element.
*/
onClickOutside.prototype.addOutsideClickHandler = function addOutsideClickHandler() {
var fn = this.__outsideClickHandler = generateOutsideCheck(findDOMNode(this.getInstance()), this.__clickOutsideHandlerProp, this.props.outsideClickIgnoreClass, this.props.excludeScrollbar, this.props.preventDefault, this.props.stopPropagation);
var pos = registeredComponents.length;
registeredComponents.push(this);
handlers[pos] = fn;
// If there is a truthy disableOnClickOutside property for this
// component, don't immediately start listening for outside events.
if (!this.props.disableOnClickOutside) {
this.enableOnClickOutside();
}
}, {
key: 'removeOutsideClickHandler',
value: function removeOutsideClickHandler() {
this.disableOnClickOutside();
this.__outsideClickHandler = false;
};
var pos = registeredComponents.indexOf(this);
onClickOutside.prototype.removeOutsideClickHandler = function removeOutsideClickHandler() {
this.disableOnClickOutside();
this.__outsideClickHandler = false;
if (pos > -1) {
// clean up so we don't leak memory
if (handlers[pos]) {
handlers.splice(pos, 1);
}
registeredComponents.splice(pos, 1);
var pos = registeredComponents.indexOf(this);
if (pos > -1) {
// clean up so we don't leak memory
if (handlers[pos]) {
handlers.splice(pos, 1);
}
registeredComponents.splice(pos, 1);
}
}, {
key: 'render',
};
/**
* Pass-through render
*/
onClickOutside.prototype.render = function render() {
var _this2 = this;
/**
* Pass-through render
*/
value: function render() {
var _this2 = this;
var props = Object.keys(this.props).filter(function (prop) {
return prop !== 'excludeScrollbar';
}).reduce(function (props, prop) {
props[prop] = _this2.props[prop];
return props;
}, {});
var props = Object.keys(this.props).filter(function (prop) {
return prop !== 'excludeScrollbar';
}).reduce(function (props, prop) {
props[prop] = _this2.props[prop];
return props;
}, {});
if (WrappedComponent.prototype.isReactComponent) {
props.ref = this.getRef;
} else {
props.wrappedRef = this.getRef;
}
if (WrappedComponent.prototype.isReactComponent) {
props.ref = this.getRef;
} else {
props.wrappedRef = this.getRef;
}
props.disableOnClickOutside = this.disableOnClickOutside;
props.enableOnClickOutside = this.enableOnClickOutside;
props.disableOnClickOutside = this.disableOnClickOutside;
props.enableOnClickOutside = this.enableOnClickOutside;
return createElement(WrappedComponent, props);
};
return createElement(WrappedComponent, props);
}
}]);
return onClickOutside;

@@ -251,3 +241,3 @@ }(Component), _class.displayName = 'OnClickOutside(' + (WrappedComponent.displayName || WrappedComponent.name || 'Component') + ')', _class.defaultProps = {

excludeScrollbar: config && config.excludeScrollbar || false,
outsideClickIgnoreClass: 'ignore-react-onclickoutside',
outsideClickIgnoreClass: IGNORE_CLASS_NAME,
preventDefault: false,

@@ -254,0 +244,0 @@ stopPropagation: false

4

lib/generateOutsideCheck.js
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.__esModule = true;
exports.default = generateOutsideCheck;

@@ -7,0 +5,0 @@ /**

280

lib/index.js
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
exports.__esModule = true;
exports.IGNORE_CLASS_NAME = undefined;
exports.default = onClickOutsideHOC;

@@ -33,2 +29,5 @@

var touchEvents = ['touchstart', 'touchmove'];
var IGNORE_CLASS_NAME = exports.IGNORE_CLASS_NAME = 'ignore-react-onclickoutside';
/**

@@ -48,4 +47,2 @@ * This function generates the HOC function that you'll use

function onClickOutside() {
var _ref;
var _temp, _this, _ret;

@@ -59,3 +56,3 @@

return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = onClickOutside.__proto__ || Object.getPrototypeOf(onClickOutside)).call.apply(_ref, [this].concat(args))), _this), _this.__outsideClickHandler = null, _this.enableOnClickOutside = function () {
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.__outsideClickHandler = null, _this.enableOnClickOutside = function () {
var fn = _this.__outsideClickHandler;

@@ -67,4 +64,11 @@ if (fn && typeof document !== 'undefined') {

}
events.forEach(function (eventName) {
var handlerOptions = !_this.props.preventDefault && ['touchstart', 'touchmove'].indexOf(eventName) !== -1 ? { passive: true } : null;
var handlerOptions = null;
var isTouchEvent = touchEvents.indexOf(eventName) !== -1;
if (isTouchEvent) {
handlerOptions = { passive: !_this.props.preventDefault };
}
document.addEventListener(eventName, fn, handlerOptions);

@@ -89,173 +93,157 @@ });

_createClass(onClickOutside, [{
key: 'getInstance',
/**
* Access the WrappedComponent's instance.
*/
onClickOutside.prototype.getInstance = function getInstance() {
if (!WrappedComponent.prototype.isReactComponent) {
return this;
}
var ref = this.instanceRef;
return ref.getInstance ? ref.getInstance() : ref;
};
// this is given meaning in componentDidMount/componentDidUpdate
/**
* Access the WrappedComponent's instance.
*/
value: function getInstance() {
if (!WrappedComponent.prototype.isReactComponent) {
return this;
}
var ref = this.instanceRef;
return ref.getInstance ? ref.getInstance() : ref;
/**
* Add click listeners to the current document,
* linked to this component's state.
*/
onClickOutside.prototype.componentDidMount = function componentDidMount() {
// If we are in an environment without a DOM such
// as shallow rendering or snapshots then we exit
// early to prevent any unhandled errors being thrown.
if (typeof document === 'undefined' || !document.createElement) {
return;
}
// this is given meaning in componentDidMount/componentDidUpdate
var instance = this.getInstance();
}, {
key: 'componentDidMount',
/**
* Add click listeners to the current document,
* linked to this component's state.
*/
value: function componentDidMount() {
// If we are in an environment without a DOM such
// as shallow rendering or snapshots then we exit
// early to prevent any unhandled errors being thrown.
if (typeof document === 'undefined' || !document.createElement) {
return;
if (config && typeof config.handleClickOutside === 'function') {
this.__clickOutsideHandlerProp = config.handleClickOutside(instance);
if (typeof this.__clickOutsideHandlerProp !== 'function') {
throw new Error('WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.');
}
var instance = this.getInstance();
if (config && typeof config.handleClickOutside === 'function') {
this.__clickOutsideHandlerProp = config.handleClickOutside(instance);
if (typeof this.__clickOutsideHandlerProp !== 'function') {
throw new Error('WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.');
}
} else if (typeof instance.handleClickOutside === 'function') {
if (_react.Component.prototype.isPrototypeOf(instance)) {
this.__clickOutsideHandlerProp = instance.handleClickOutside.bind(instance);
} else {
this.__clickOutsideHandlerProp = instance.handleClickOutside;
}
} else if (typeof instance.props.handleClickOutside === 'function') {
this.__clickOutsideHandlerProp = instance.props.handleClickOutside;
} else if (typeof instance.handleClickOutside === 'function') {
if (_react.Component.prototype.isPrototypeOf(instance)) {
this.__clickOutsideHandlerProp = instance.handleClickOutside.bind(instance);
} else {
throw new Error('WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.');
this.__clickOutsideHandlerProp = instance.handleClickOutside;
}
} else if (typeof instance.props.handleClickOutside === 'function') {
this.__clickOutsideHandlerProp = instance.props.handleClickOutside;
} else {
throw new Error('WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.');
}
// TODO: try to get rid of this, could be done with function ref, might be problematic for SFC though, they do not expose refs
if ((0, _reactDom.findDOMNode)(instance) === null) {
return;
}
this.addOutsideClickHandler();
// TODO: try to get rid of this, could be done with function ref, might be problematic for SFC though, they do not expose refs
if ((0, _reactDom.findDOMNode)(instance) === null) {
return;
}
/**
* Track for disableOnClickOutside props changes and enable/disable click outside
*/
this.addOutsideClickHandler();
};
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.props.disableOnClickOutside && !nextProps.disableOnClickOutside) {
this.enableOnClickOutside();
} else if (!this.props.disableOnClickOutside && nextProps.disableOnClickOutside) {
this.disableOnClickOutside();
}
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
var componentNode = (0, _reactDom.findDOMNode)(this.getInstance());
/**
* Track for disableOnClickOutside props changes and enable/disable click outside
*/
if (componentNode === null && this.__outsideClickHandler) {
this.removeOutsideClickHandler();
return;
}
if (componentNode !== null && !this.__outsideClickHandler) {
this.addOutsideClickHandler();
return;
}
onClickOutside.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.props.disableOnClickOutside && !nextProps.disableOnClickOutside) {
this.enableOnClickOutside();
} else if (!this.props.disableOnClickOutside && nextProps.disableOnClickOutside) {
this.disableOnClickOutside();
}
};
/**
* Remove all document's event listeners for this component
*/
onClickOutside.prototype.componentDidUpdate = function componentDidUpdate() {
var componentNode = (0, _reactDom.findDOMNode)(this.getInstance());
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (componentNode === null && this.__outsideClickHandler) {
this.removeOutsideClickHandler();
return;
}
/**
* Can be called to explicitly enable event listening
* for clicks and touches outside of this element.
*/
if (componentNode !== null && !this.__outsideClickHandler) {
this.addOutsideClickHandler();
return;
}
};
/**
* Remove all document's event listeners for this component
*/
/**
* Can be called to explicitly disable event listening
* for clicks and touches outside of this element.
*/
}, {
key: 'addOutsideClickHandler',
value: function addOutsideClickHandler() {
var fn = this.__outsideClickHandler = (0, _generateOutsideCheck2.default)((0, _reactDom.findDOMNode)(this.getInstance()), this.__clickOutsideHandlerProp, this.props.outsideClickIgnoreClass, this.props.excludeScrollbar, this.props.preventDefault, this.props.stopPropagation);
onClickOutside.prototype.componentWillUnmount = function componentWillUnmount() {
this.removeOutsideClickHandler();
};
var pos = registeredComponents.length;
registeredComponents.push(this);
handlers[pos] = fn;
/**
* Can be called to explicitly enable event listening
* for clicks and touches outside of this element.
*/
// If there is a truthy disableOnClickOutside property for this
// component, don't immediately start listening for outside events.
if (!this.props.disableOnClickOutside) {
this.enableOnClickOutside();
}
/**
* Can be called to explicitly disable event listening
* for clicks and touches outside of this element.
*/
onClickOutside.prototype.addOutsideClickHandler = function addOutsideClickHandler() {
var fn = this.__outsideClickHandler = (0, _generateOutsideCheck2.default)((0, _reactDom.findDOMNode)(this.getInstance()), this.__clickOutsideHandlerProp, this.props.outsideClickIgnoreClass, this.props.excludeScrollbar, this.props.preventDefault, this.props.stopPropagation);
var pos = registeredComponents.length;
registeredComponents.push(this);
handlers[pos] = fn;
// If there is a truthy disableOnClickOutside property for this
// component, don't immediately start listening for outside events.
if (!this.props.disableOnClickOutside) {
this.enableOnClickOutside();
}
}, {
key: 'removeOutsideClickHandler',
value: function removeOutsideClickHandler() {
this.disableOnClickOutside();
this.__outsideClickHandler = false;
};
var pos = registeredComponents.indexOf(this);
onClickOutside.prototype.removeOutsideClickHandler = function removeOutsideClickHandler() {
this.disableOnClickOutside();
this.__outsideClickHandler = false;
if (pos > -1) {
// clean up so we don't leak memory
if (handlers[pos]) {
handlers.splice(pos, 1);
}
registeredComponents.splice(pos, 1);
var pos = registeredComponents.indexOf(this);
if (pos > -1) {
// clean up so we don't leak memory
if (handlers[pos]) {
handlers.splice(pos, 1);
}
registeredComponents.splice(pos, 1);
}
}, {
key: 'render',
};
/**
* Pass-through render
*/
onClickOutside.prototype.render = function render() {
var _this2 = this;
/**
* Pass-through render
*/
value: function render() {
var _this2 = this;
var props = Object.keys(this.props).filter(function (prop) {
return prop !== 'excludeScrollbar';
}).reduce(function (props, prop) {
props[prop] = _this2.props[prop];
return props;
}, {});
var props = Object.keys(this.props).filter(function (prop) {
return prop !== 'excludeScrollbar';
}).reduce(function (props, prop) {
props[prop] = _this2.props[prop];
return props;
}, {});
if (WrappedComponent.prototype.isReactComponent) {
props.ref = this.getRef;
} else {
props.wrappedRef = this.getRef;
}
if (WrappedComponent.prototype.isReactComponent) {
props.ref = this.getRef;
} else {
props.wrappedRef = this.getRef;
}
props.disableOnClickOutside = this.disableOnClickOutside;
props.enableOnClickOutside = this.enableOnClickOutside;
props.disableOnClickOutside = this.disableOnClickOutside;
props.enableOnClickOutside = this.enableOnClickOutside;
return (0, _react.createElement)(WrappedComponent, props);
};
return (0, _react.createElement)(WrappedComponent, props);
}
}]);
return onClickOutside;

@@ -265,3 +253,3 @@ }(_react.Component), _class.displayName = 'OnClickOutside(' + (WrappedComponent.displayName || WrappedComponent.name || 'Component') + ')', _class.defaultProps = {

excludeScrollbar: config && config.excludeScrollbar || false,
outsideClickIgnoreClass: 'ignore-react-onclickoutside',
outsideClickIgnoreClass: IGNORE_CLASS_NAME,
preventDefault: false,

@@ -268,0 +256,0 @@ stopPropagation: false

10

package.json
{
"name": "react-onclickoutside",
"version": "6.4.0",
"version": "6.4.1-0",
"description": "An onClickOutside wrapper for React components",

@@ -32,3 +32,3 @@ "main": "lib/index.js",

"scripts": {
"build": "npm run build:es && npm run build:commonjs",
"build": "run-p build:*",
"build:es": "cross-env BABEL_ENV=es babel src -d es",

@@ -38,3 +38,3 @@ "build:commonjs": "cross-env BABEL_ENV=commonjs babel src -d lib",

"test": "run-s test:**",
"test:basic": "run-s lint build",
"test:basic": "run-s lint build:commonjs",
"test:karma": "karma start test/karma.conf.js --single-run",

@@ -77,4 +77,4 @@ "test:nodom": "mocha test/no-dom-test.js",

"peerDependencies": {
"react": "^15.5.x",
"react-dom": "^15.5.x"
"react": "^15.5.x || ^16.x",
"react-dom": "^15.5.x || ^16.x"
},

@@ -81,0 +81,0 @@ "lint-staged": {

167

README.md

@@ -0,1 +1,5 @@

[![npm version](https://img.shields.io/npm/v/react-onclickoutside.svg)](https://www.npmjs.com/package/react-onclickoutside)
[![Build Status](https://travis-ci.org/Pomax/react-onclickoutside.svg?branch=master)](https://travis-ci.org/Pomax/react-onclickoutside)
[![npm](https://img.shields.io/npm/dm/react-onclickoutside.svg)](https://www.npmjs.com/package/react-onclickoutside)
# An onClickOutside wrapper for React components

@@ -11,2 +15,17 @@

## Sections covered in this README
- [Installation](#installation)
- [Regulate which events to listen for](#regulate-which-events-to-listen-for)
- [Regulate whether or not to listen for outside clicks](#regulate-whether-or-not-to-listen-for-outside-clicks)
- [Regulate whether or not to listen to scrollbar clicks](#regulate-whether-or-not-to-listen-to-scrollbar-clicks)
- [Regulating `evt.preventDefault()` and `evt.stopPropagation()`](#regulating-evtpreventdefault-and-evtstoppropagation)
- [Marking elements as "skip over this one" during the event loop](#marking-elements-as-skip-over-this-one-during-the-event-loop)
- [Older React code: "What happened to the Mixin??"](#older-react-code-what-happened-to-the-mixin)
* [But how can I access my component? It has an API that I rely on!](#but-how-can-i-access-my-component-it-has-an-api-that-i-rely-on)
- [Which version do I need for which version of React?](#which-version-do-i-need-for-which-version-of-react)
* [Support-wise, only the latest version will receive updates and bug fixes.](#support-wise-only-the-latest-version-will-receive-updates-and-bug-fixes)
- [IE does not support classList for SVG elements!](#ie-does-not-support-classlist-for-svg-elements)
- [I can't find what I need in the README](#i-cant-find-what-i-need-in-the-readme)
## Installation

@@ -23,21 +42,3 @@

```js
// load the HOC:
var onClickOutside = require('react-onclickoutside');
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...
},
...
}));
```
or:
```js
// ES6 Class Syntax
// ES6 Class and Module Syntax
import React, { Component } from 'react'

@@ -55,8 +56,8 @@ import onClickOutside from 'react-onclickoutside'

Note that if you try to wrap a React component class without a `handleClickOutside(evt)` handler like this, the HOC will throw an error. In order to use a custom event handler, you can specify the function to be used by the HOC as second parameter
(this can be useful in environments like TypeScript, where the fact that the wrapped component does not implement the handler can be flagged at compile-time):
or:
```js
// load the HOC:
var onClickOutside = require('react-onclickoutside');
// good old node.js/CommonJS require
// .default is needed because library is bundled as ES6 module
var onClickOutside = require('react-onclickoutside').default;
var createReactClass = require('create-react-class');

@@ -67,12 +68,31 @@

...,
myClickOutsideHandler: function(evt) {
handleClickOutside: function(evt) {
// ...handling code goes here...
},
...
}), {
}));
```
Note that if you try to wrap a React component class without a `handleClickOutside(evt)` handler like this, the HOC will throw an error. In order to use a custom event handler, you can specify the function to be used by the HOC as second parameter
(this can be useful in environments like TypeScript, where the fact that the wrapped component does not implement the handler can be flagged at compile-time):
```js
// 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);
```

@@ -106,18 +126,19 @@

```js
var onClickOutside = require('react-onclickoutside');
var createReactClass = require('create-react-class');
import React, { Component } from 'react'
import onClickOutside from 'react-onclickoutside'
var MyComponent = onClickOutside(createReactClass({
...,
handleClickOutside: function(evt) {
class MyComponent extends Component {
...
handleClickOutside(evt) {
// ...
},
}
...
}));
}
var EnhancedComponent = onClickOutside(MyComponent);
var Container = createReactClass({
render: function(evt) {
return <MyComponent disableOnClickOutside={true} />
class Container extends Component {
render(evt) {
return <EnhancedComponent disableOnClickOutside={true} />
}
});
}
```

@@ -132,14 +153,15 @@

```js
var onClickOutside = require('react-onclickoutside');
var createReactClass = require('create-react-class');
import React, { Component } from 'react'
import onClickOutside from 'react-onclickoutside'
var MyComponent = onClickOutside(createReactClass({
class MyComponent extends Component {
...
}));
}
var EnhancedComponent = onClickOutside(MyComponent);
var Container = createReactClass({
render: function(evt) {
return <MyComponent excludeScrollbar={true} />
class Container extends Component {
render(evt) {
return <EnhancedComponent excludeScrollbar={true} />
}
});
}
```

@@ -150,7 +172,12 @@

```js
var MyComponent = onClickOutside(createReactClass({
import React, { Component } from 'react'
import onClickOutside from 'react-onclickoutside'
class MyComponent extends Component {
...
}), {
}
var clickOutsideConfig = {
excludeScrollbar: true
});
}
var EnhancedComponent = onClickOutside(MyComponent, clickOutsideConfig);
```

@@ -179,16 +206,22 @@

```js
var onClickOutside = require('react-onclickoutside');
var createReactClass = require('create-react-class');
import React, { Component } from 'react'
import onClickOutside from 'react-onclickoutside'
var MyComponent = onClickOutside(createReactClass({
...,
handleClickOutside: function(evt) {
class MyComponent extends Component {
...
handleClickOutside(evt) {
// ...
},
}
...
}));
}
var EnhancedComponent = onClickOutside(MyComponent);
var Container = createReactClass({
someFunction: function() {
var ref = this.refs.mycomp;
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:

@@ -198,8 +231,12 @@ var superTrueMyComponent = ref.getInstance();

superTrueMyComponent.customFunction();
},
}
render: function(evt) {
return <MyComponent disableOnClickOutside={true} ref="mycomp"/>
getMyComponentRef(ref) {
this.myComponentRef = ref;
}
});
render(evt) {
return <EnhancedComponent disableOnClickOutside={true} ref={this.getMyComponentRef}/>
}
}
```

@@ -232,1 +269,5 @@

Eventually this problem will stop being one, but in the mean time *you* are responsible for making *your* site work by shimming everything that needs shimming for IE. As such, **if you file a PR to fix classList-and-SVG issues specifically for this library, your PR will be closed and I will politely point you to this README.md section**. I will not accept PRs to fix this issue. You already have the power to fix it, and I expect you to take responsibility as a fellow developer to shim what you need instead of getting obsolete quirks supported by libraries whose job isn't to support obsolete quirks.
## I can't find what I need in the README
If you've read the whole thing and you still can't find what you were looking for, then the README is missing important information that should be added in. Please [file an issue](issues) with a request for additional documentation, describing what you were hoping to find in enough detail that it can be used to write up the information you needed.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc