react-dialog

react dialog component

Screenshot

Usage

Actual directory of dialog components in the import project, You may use it like this:

import Dialog from '../src/Dialog'

<Dialog
	visible
	style={style} 
	onClose={this.onClose}
	onClickMask
>
	<div>
		<p>react dialog demo</p>
	</div>
</Dialog>

Or

import Dialog from '../src/Dialog'

<Dialog
  visible={ this.state.visible }
  style={style} 
  onClose={this.onClose}
  closeVisible={false} //or closeContent:{ <div className="abc"></div> }
  onClickMask
>
  <div>
      <p>信息提示</p>
      <button>确定</button>
      <button>取消</button>
  </div>
</Dialog>

API

Dialog props

name	type	default	description
visible	Boolean	false	current dialog's status
style	Object		dialog's style, e.g. { zIndex:10000, width:300, height:100 }
wrapClassName	String		dialog's wrap custom className
onClose	function(){}		callback when click close button or mask
onClickMask	Boolean	false	mask when click Whether to close
maskOpacity	Number	.8	Custom mask's transparency
closeVisible	Boolean	true	Whether to display the close button
closeContent	React.element		Custom close button

Latest version

1.2.0

License

MIT