react-click-out - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,4 @@
+## 1.1.0 (Jul 02, 2018)
+- Add a `container` prop that changes the container element tag
+
 ## 1.0.4 (Jun 28, 2018)
@@ -2,0 +5,0 @@ - Fix default import

dist/ClickOut.d.ts

@@ -5,5 +5,9 @@ import * as React from 'react';
     className: string;
+    container: string;
 }
 declare class ClickOut extends React.Component<Props, {}> {
     private wrapper;
+    static defaultProps: {
+        container: string;
+    };
     componentDidMount(): void;
@@ -13,8 +17,8 @@ componentWillUnmount(): void;
     onAnyClick: (e: any) => void;
-    render(): React.DetailedReactHTMLElement<{
-        ref: (wrapper: HTMLElement) => void;
+    render(): React.DOMElement<{
+        ref: (wrapper: Element) => void;
         children: React.ReactNode;
         className: string;
-    }, HTMLElement>;
+    }, Element>;
 }
 export default ClickOut;

dist/index.js

@@ -1,2 +0,2 @@
-var t=require("react"),n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,n){t.__proto__=n}||function(t,n){for(var e in n)n.hasOwnProperty(e)&&(t[e]=n[e])})(t,e)};var e=function(e){function o(){var t=null!==e&&e.apply(this,arguments)||this;return t.onSelfClick=function(n){n.clickOutTarget=t.wrapper},t.onAnyClick=function(n){var e=t.props.onClickOut;n.clickOutTarget!==t.wrapper&&e&&e(n)},t}return function(t,e){function o(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}(o,e),o.prototype.componentDidMount=function(){"undefined"!=typeof window&&(this.wrapper.addEventListener("click",this.onSelfClick),document.addEventListener("click",this.onAnyClick))},o.prototype.componentWillUnmount=function(){this.wrapper.removeEventListener("click",this.onSelfClick),document.removeEventListener("click",this.onAnyClick)},o.prototype.render=function(){var n=this,e=this.props;return t.createElement("div",{ref:function(t){n.wrapper=t},children:e.children,className:e.className})},o}(t.Component);module.exports=e;
+var t=require("react"),n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,n){t.__proto__=n}||function(t,n){for(var e in n)n.hasOwnProperty(e)&&(t[e]=n[e])})(t,e)};var e=function(e){function o(){var t=null!==e&&e.apply(this,arguments)||this;return t.onSelfClick=function(n){n.clickOutTarget=t.wrapper},t.onAnyClick=function(n){var e=t.props.onClickOut;n.clickOutTarget!==t.wrapper&&e&&e(n)},t}return function(t,e){function o(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}(o,e),o.prototype.componentDidMount=function(){"undefined"!=typeof window&&(this.wrapper.addEventListener("click",this.onSelfClick),document.addEventListener("click",this.onAnyClick))},o.prototype.componentWillUnmount=function(){this.wrapper.removeEventListener("click",this.onSelfClick),document.removeEventListener("click",this.onAnyClick)},o.prototype.render=function(){var n=this,e=this.props;return t.createElement(e.container,{ref:function(t){n.wrapper=t},children:e.children,className:e.className})},o.defaultProps={container:"div"},o}(t.Component);module.exports=e;
 //# sourceMappingURL=index.js.map

dist/index.m.js

@@ -1,2 +0,2 @@
-import{createElement as t,Component as n}from"react";var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,n){t.__proto__=n}||function(t,n){for(var e in n)n.hasOwnProperty(e)&&(t[e]=n[e])})(t,n)};export default function(n){function o(){var t=null!==n&&n.apply(this,arguments)||this;return t.onSelfClick=function(n){n.clickOutTarget=t.wrapper},t.onAnyClick=function(n){var e=t.props.onClickOut;n.clickOutTarget!==t.wrapper&&e&&e(n)},t}return function(t,n){function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}(o,n),o.prototype.componentDidMount=function(){"undefined"!=typeof window&&(this.wrapper.addEventListener("click",this.onSelfClick),document.addEventListener("click",this.onAnyClick))},o.prototype.componentWillUnmount=function(){this.wrapper.removeEventListener("click",this.onSelfClick),document.removeEventListener("click",this.onAnyClick)},o.prototype.render=function(){var n=this,e=this.props;return t("div",{ref:function(t){n.wrapper=t},children:e.children,className:e.className})},o}(n);
+import{createElement as t,Component as n}from"react";var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,n){t.__proto__=n}||function(t,n){for(var e in n)n.hasOwnProperty(e)&&(t[e]=n[e])})(t,n)};export default function(n){function o(){var t=null!==n&&n.apply(this,arguments)||this;return t.onSelfClick=function(n){n.clickOutTarget=t.wrapper},t.onAnyClick=function(n){var e=t.props.onClickOut;n.clickOutTarget!==t.wrapper&&e&&e(n)},t}return function(t,n){function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}(o,n),o.prototype.componentDidMount=function(){"undefined"!=typeof window&&(this.wrapper.addEventListener("click",this.onSelfClick),document.addEventListener("click",this.onAnyClick))},o.prototype.componentWillUnmount=function(){this.wrapper.removeEventListener("click",this.onSelfClick),document.removeEventListener("click",this.onAnyClick)},o.prototype.render=function(){var n=this,e=this.props;return t(e.container,{ref:function(t){n.wrapper=t},children:e.children,className:e.className})},o.defaultProps={container:"div"},o}(n);
 //# sourceMappingURL=index.m.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.reactClickOut=e(t.react)}(this,function(t){var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,n)};return function(n){function o(){var t=null!==n&&n.apply(this,arguments)||this;return t.onSelfClick=function(e){e.clickOutTarget=t.wrapper},t.onAnyClick=function(e){var n=t.props.onClickOut;e.clickOutTarget!==t.wrapper&&n&&n(e)},t}return function(t,n){function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}(o,n),o.prototype.componentDidMount=function(){"undefined"!=typeof window&&(this.wrapper.addEventListener("click",this.onSelfClick),document.addEventListener("click",this.onAnyClick))},o.prototype.componentWillUnmount=function(){this.wrapper.removeEventListener("click",this.onSelfClick),document.removeEventListener("click",this.onAnyClick)},o.prototype.render=function(){var e=this,n=this.props;return t.createElement("div",{ref:function(t){e.wrapper=t},children:n.children,className:n.className})},o}(t.Component)});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.reactClickOut=e(t.react)}(this,function(t){var e=function(t,n){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,n)};return function(n){function o(){var t=null!==n&&n.apply(this,arguments)||this;return t.onSelfClick=function(e){e.clickOutTarget=t.wrapper},t.onAnyClick=function(e){var n=t.props.onClickOut;e.clickOutTarget!==t.wrapper&&n&&n(e)},t}return function(t,n){function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}(o,n),o.prototype.componentDidMount=function(){"undefined"!=typeof window&&(this.wrapper.addEventListener("click",this.onSelfClick),document.addEventListener("click",this.onAnyClick))},o.prototype.componentWillUnmount=function(){this.wrapper.removeEventListener("click",this.onSelfClick),document.removeEventListener("click",this.onAnyClick)},o.prototype.render=function(){var e=this,n=this.props;return t.createElement(n.container,{ref:function(t){e.wrapper=t},children:n.children,className:n.className})},o.defaultProps={container:"div"},o}(t.Component)});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
     "name": "react-click-out",
-    "version": "1.0.4",
+    "version": "1.1.0",
     "description": "A react component to handle click out events",
@@ -5,0 +5,0 @@ "keywords": [

readme.md

 # React Click Out
+[![npm](https://img.shields.io/npm/dt/react-click-out.svg)](https://www.npmjs.com/package/react-click-out)
 
@@ -39,1 +40,9 @@ A simple component that triggers a callback function when click out.
 ```
+
+## API Reference
+
+| prop | description | default |
+| --------- | ----------- | ----------- |
+| onClickOut | click out callback function | - |
+| className | className | - |
+| container | sets container element tag | div |

src/ClickOut.ts

@@ -5,8 +5,13 @@ import * as React from 'react';
     onClickOut: (event: MouseEvent) => void
-    className: string
+    className: string,
+    container: string
 }
 
 class ClickOut extends React.Component<Props, {}> {
-    private wrapper: HTMLElement;
+    private wrapper: Element;
 
+    static defaultProps = {
+        container: 'div'
+    }
+
     componentDidMount() {
@@ -42,6 +47,6 @@ if (typeof window !== 'undefined') {
     render() {
-        const { className, children } = this.props;
+        const { className, children, container } = this.props;
 
         return (
-            React.createElement('div', {
+            React.createElement(container, {
                 ref: (wrapper) => {
@@ -48,0 +53,0 @@ this.wrapper = wrapper;

No alert changes

Improved metrics

Total package byte prevSize

16426

increased by4.42%

Lines of code

151

increased by6.34%

Number of lines in readme file

48

increased by23.08%

No dependency changes