React component-wrapper to detect page events (mousedown or touchstart/touchend) outside of wrapped element.

Usage no npm install needed!

<script type="module">
  import reactPageClick from '';


react-page-click npm

React component-wrapper to detect page events (mousedown or touchstart/touchend) outside of wrapped element.

Gitter Dependencies Dev Dependencies

React Page Click



npm install --save react react-page-click

Don't forget to manually install peer dependencies (react) if you use npm@3.

1998 Script Tag:

<script src=""></script>
<script src=""></script>
(Module exposed as `ReactPageClick`)


Codepen demo


Show only when this.state.opened and hide by click anywhere on a page outside of .popup element.

{this.state.opened ? (
  <ReactPageClick notify={() => this.setState({opened: false})}>
    <div className="popup">
      Some Popup content
) : null}

Modal window example

import React from 'react';
import ReactDOM from 'react-dom';
import {ReactPageClick} from 'react-page-click';

const styles = {
  popup: {
    position: 'fixed',
    top: '50%',
    left: '50%',
    width: '40%',
    height: '40%',
    marginTop: '-20%',
    marginLeft: '-20%',

    fontSize: 30,
    textAlign: 'center',

    background: 'rgba(255, 255, 255, 0.9)',
    borderRadius: 10
  shade: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'rgba(0, 0, 0, 0.3)'
  content: {
    padding: 50

const Modal = React.createClass({
  propTypes: {
    onClose: React.PropTypes.func.isRequired

  render() {
    const {onClose, ...props} = this.props;

    return (
        <div style={styles.shade} />
        <ReactPageClick notify={this.props.onClose}>
          <div style={styles.popup}>
            <div style={styles.content} {...props} />

const App = React.createClass({
  getInitialState() {
    return {
      showModal: false

  render() {
    const {showModal} = this.state;

    return (
        <button onClick={() => this.setState({showModal: true})}>
          Open Modal

        {showModal ? (
          <Modal onClose={() => this.setState({showModal: false})}>
            Modal content
        ) : null}

const appRoot = document.createElement('div');
ReactDOM.render(<App />, appRoot);


notify: PropTypes.func.isRequired

Function called when mousedown or touchstart/touchend is detected

notifyOnTouchEnd: PropTypes.bool (default: false)

Should notify be called when on touchstart or touchend on a touch device. This can be useful when you only want to call notify when the user taps, instead of scrolling or zooming.

Default value is false which means that notify will get triggered on mousedown or touchstart.

outsideOnly: PropTypes.bool (default: true)

Should notify be called when mousedown or touchstart/touchend is detected outside of wrapped element or anywhere including it?

Default value is true which means that events will be detected only outside of wrapped element.

children: PropTypes.node.isRequired

The only child element is required. It must be a valid DOM element, otherwise it is not possible to capture events on it.