import MaskLayer from 'react-mask-layer';
import 'react-mask-layer/assets/index.css';
 
class App extends Component {
  constructor(props) {
    super(props);
    // initial state
    this.state = {
      maskerVisible: false,
    };
  }
 
  _maskCancel = e => {
    console.log('cancel target: ', e.target, ' type: ', e.type);
    this.setState({ maskerVisible: false });
  };
 
  _showOverlay = e => {
    console.log('show target: ', e.target, ' type: ', e.type);
    e.preventDefault();
    this.setState({ maskerVisible: true });
  };
 
  render() {
    return (
      <div className="App">
        <div onClick={this._showOverlay}>show mask layer</div>
        <MaskLayer visible={this.state.maskerVisible} onCancel={this._maskCancel} />
      </div>
    );
  }
}