react-mask-layer

react-mask-layer

Animatable mask layer, to hold anything you want.

Install

Usage

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>
    );
  }
}

API

Name	Type	Default	Description
prefixCls	String	mx-mask	The mask layer dom node's prefixCls
className	String		additional className for mask layer
wrapClassName	String		additional className for mask layer wrap
style	Object	{}	Root style for mask layer element.Such as width, height
zIndex	Number
bodyStyle	Object	{}	body style for mask layer body element.Such as height
maskStyle	Object	{}	style for mask element
visible	Boolean	false	current mask layer's visible status
animation	String		part of mask layer animation css class name
maskAnimation	String		part of mask layer's mask animation css class name
transitionName	String		mask layer animation css class name
maskTransitionName	String		mask animation css class name
maskClosable	Boolean	true	whether click mask to close
keyboard	Boolean	true	whether support press esc to close
mousePosition	{x:number,y:number}		set pageX and pageY of current mouse(it will cause transform origin to be set)
onClose	function()		called when click mask

License

react-mask-layer is available under the MIT license. See the LICENSE file for more info.