Skip to content

react-component/dialog

Repository files navigation

rc-dialog

react dialog component

NPM version dumi build status Test coverage npm download bundle size

Screenshot

Example

http://localhost:8007/examples/

online example: https://dialog.react-component.vercel.app/

Install

rc-dialog

Usage

var Dialog = require('rc-dialog');

ReactDOM.render(
  <Dialog title={title} onClose={callback1} visible>
      <p>first dialog</p>
  </Dialog>
), document.getElementById('t1'));

// use dialog

API

rc-dialog

Name Type Default Description Version
prefixCls String rc-dialog The dialog dom node's prefixCls
className String additional className for dialog
classNames { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string; } pass className to target area
styles { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } pass styles to target area
style Object {} Root style for dialog element.Such as width, height
zIndex Number
visible Boolean false current dialog's visible status
animation String part of dialog animation css class name
maskAnimation String part of dialog's mask animation css class name
transitionName String dialog animation css class name
maskTransitionName String mask animation css class name
title String|React.Element Title of the dialog
footer React.Element footer of the dialog
closable Boolean | ({ closeIcon?: React.ReactNode; disabled?: boolean } & React.AriaAttributes true whether show close button
mask Boolean true whether show mask
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 close button or mask
afterClose function() called when close animation end
getContainer function(): HTMLElement to determine where Dialog will be mounted
destroyOnClose Boolean false to unmount child compenents on onClose
closeIcon ReactNode specific the close icon.
forceRender Boolean false Create dialog dom node before dialog first show
focusTriggerAfterClose Boolean true focus trigger element when dialog closed
modalRender (node: ReactNode) => ReactNode Custom modal content render 8.3.0

Development

npm install
npm start

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-dialog is released under the MIT license.