How to use the react-onclickoutside.default function in react-onclickoutside

To help you get started, we’ve selected a few react-onclickoutside examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github LLK / scratch-www / src / components / dropdown / dropdown.jsx View on Github external
}
}

Dropdown.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    isOpen: PropTypes.bool,
    onRequestClose: PropTypes.func.isRequired
};

Dropdown.defaultProps = {
    as: 'div',
    isOpen: false
};

module.exports = onClickOutside(Dropdown);
github mukeshsoni / react-telephone-input / lib / ReactTelephoneInput.js View on Github external
className: "selected-flag",
            title: this.state.selectedCountry.name + ": + " + this.state.selectedCountry.dialCode
          },
          React.createElement(
            "div",
            { className: inputFlagClasses, style: this.getFlagStyle() },
            React.createElement("div", { className: arrowClasses })
          )
        ),
        this.state.showDropDown ? this.getCountryDropDownList() : ""
      )
    );
  }
});

exports.default = onClickOutside(ReactTelephoneInput);
github YouCanBookMe / react-datetime / DateTime.js View on Github external
className += ' rdtStatic';
		}

		if ( this.props.open || (this.props.open === undefined && this.state.open ) )
			className += ' rdtOpen';

		return React.createElement( ClickableWrapper, {className: className, onClickOut: this.handleClickOutside}, children.concat(
			React.createElement( 'div',
				{ key: 'dt', className: 'rdtPicker' },
				React.createElement( CalendarContainer, { view: this.state.currentView, viewProps: this.getComponentProps() })
			)
		));
	}
});

var ClickableWrapper = onClickOutside( createClass({
	render: function() {
		return React.createElement( 'div', { className: this.props.className }, this.props.children );
	},
	handleClickOutside: function( e ) {
		this.props.onClickOut( e );
	}
}));

Datetime.defaultProps = {
	className: '',
	defaultValue: '',
	inputProps: {},
	input: true,
	onFocus: function() {},
	onBlur: function() {},
	onChange: function() {},
github hotosm / visualize-change / frontend / src / components / help.js View on Github external
}
      />
    );
  }
}

const HelpPopoverConnected = connect(
  ({ ui }) => ({ tutorialMode: ui.tutorialMode, visiblePopovers: ui.visiblePopoversIds }),
  {
    showPopover,
    hidePopover,
    setTutorialModeOff,
    goToNextInTutorial
  }
)(onClickOutside(HelpPopover));

module.exports = HelpPopoverConnected;
github mukeshsoni / react-telephone-input / es / ReactTelephoneInput.js View on Github external
className: "selected-flag",
            title: this.state.selectedCountry.name + ": + " + this.state.selectedCountry.dialCode
          },
          React.createElement(
            "div",
            { className: inputFlagClasses, style: this.getFlagStyle() },
            React.createElement("div", { className: arrowClasses })
          )
        ),
        this.state.showDropDown ? this.getCountryDropDownList() : ""
      )
    );
  }
});

export default onClickOutside(ReactTelephoneInput);

react-onclickoutside

An onClickOutside wrapper for React components

MIT
Latest version published 5 months ago

Package Health Score

81 / 100
Full package analysis