react-mask-layer
Animatable mask layer, to hold anything you want.
Install
Usage
;; { superprops; // initial state thisstate = maskerVisible: false ; } { console; this; }; { console; e; this; }; { return <div className="App"> <div onClick=this_showOverlay>show mask layer</div> <MaskLayer visible=thisstatemaskerVisible 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.