# rmc-dialog > mobile dialog ui component for react Latest version **1.1.1** (published 2018-06-06) · MIT license · 0 weekly downloads ## Install ```sh npm install rmc-dialog pnpm add rmc-dialog yarn add rmc-dialog bun add rmc-dialog ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.1 | | Published | 2018-06-06 | | First published | 2017-09-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 62 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 45 | | Maintainers | paranoidjk, silentcloud, warmhug, zhang740 | | Keywords | react, m-dialog, react-component, react-dialog, dialog, mobile dialog, ui | ## Links - npm: https://www.npmjs.com/package/rmc-dialog - Repository: https://github.com/react-component/m-dialog - Homepage: http://github.com/react-component/m-dialog - Issues: http://github.com/react-component/m-dialog/issues - npm.io page: https://npm.io/package/rmc-dialog ## Dependencies (2) - [rc-animate](https://npm.io/package/rc-animate.md) 2.x - [babel-runtime](https://npm.io/package/babel-runtime.md) 6.x ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.1.1 (latest) — 2018-06-06 - 0.0.1-alpha.4 (beta) — 2017-09-06 - 1.1.0 — 2018-05-08 - 1.0.6 — 2017-11-16 - 1.0.5 — 2017-10-19 - 1.0.4 — 2017-10-13 - 1.0.3 — 2017-09-29 - 1.0.2 — 2017-09-29 - 1.0.1 — 2017-09-28 - 0.0.1-alpha.3 — 2017-09-06 - 0.0.1-alpha.2 — 2017-09-06 - 0.0.1-alpha.1 — 2017-09-06 - 0.0.1-alpha.0 — 2017-09-05 ## README # m-dialog --- react dialog component for mobile [![NPM version][npm-image]][npm-url] [![build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![npm download][download-image]][download-url] [npm-image]: http://img.shields.io/npm/v/rmc-dialog.svg?style=flat-square [npm-url]: http://npmjs.org/package/rmc-dialog [travis-image]: https://img.shields.io/travis/react-component/m-dialog.svg?style=flat-square [travis-url]: https://travis-ci.org/react-component/m-dialog [coveralls-image]: https://img.shields.io/coveralls/react-component/m-dialog.svg?style=flat-square [coveralls-url]: https://coveralls.io/r/react-component/m-dialog?branch=master [gemnasium-image]: http://img.shields.io/gemnasium/react-component/m-dialog.svg?style=flat-square [gemnasium-url]: https://gemnasium.com/react-component/m-dialog [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square [node-url]: http://nodejs.org/download/ [download-image]: https://img.shields.io/npm/dm/rmc-dialog.svg?style=flat-square [download-url]: https://npmjs.org/package/rmc-dialog ## Screenshot ## Install [![rmc-dialog](https://nodei.co/npm/rmc-dialog.png)](https://npmjs.org/package/rmc-dialog) ## Usage ```js var Dialog = require('rmc-dialog'); ReactDOM.render(

first dialog

 ), document.getElementById('t1')); // use dialog ``` ## API ### rmc-dialog(web) | name | description | type | default | |----------|----------------|----------|--------------| | prefixCls | The dialog dom node's prefixCls | String | `rmc-dialog` | | className | additional className for dialog | String | | | wrapClassName | additional className for dialog wrap | String | | | style | Root style for dialog element.Such as width, height | Object | {} | | zIndex | z-index | Number | | | bodyStyle | body style for dialog body element.Such as height | Object | {} | | maskStyle | style for mask element. | Object | {} | | visible | current dialog's visible status | Boolean | false | | animation | part of dialog animation css class name | String | | | maskAnimation | part of dialog's mask animation css class name | String | | | transitionName | dialog animation css class name | String | | | maskTransitionName | mask animation css class name | String | | | title | Title of the dialog | String|React.Element | | | footer | footer of the dialog | React.Element | | | closable | whether show close button | Boolean | true | | mask | whether show mask | Boolean | true | | maskClosable | whether click mask to close | Boolean | true | | onClose | called when click close button or mask | function | | ### rmc-dialog/lib/Dialog (react-native) | name | description | type | default | |----------|----------------|----------|--------------| | wrapStyle | style for modal wrap | Object | {} | | maskStyle | style for modal mask | Object | {} | | style | style for modal | Object | {} | | animationType | animation type for modal content, can be one of `none|fade|slide-up|slide-down` | String | slide-up | | animationDuration | animation duration | number | 300 | | visible | visible state | boolean | false | | animateAppear | whether animation on first show | boolean | false | | onClose | called when close | Function | ()=>void | | onAnimationEnd | called when animation end | Function | (visible:boolean)=>void (animationType !== 'none') | ## Development ``` npm install npm start ``` ## Example http://localhost:8007/examples/ online example: http://react-component.github.io/m-dialog/ ## react-native ``` npm run rn-init npm run watch-tsc react-native start react-native run-ios ``` ## Test Case ``` npm test npm run chrome-test ``` ## Coverage ``` npm run coverage ``` open coverage/ dir ## License rmc-dialog is released under the MIT license. --- _Source: https://npm.io/package/rmc-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._