react-modeless

react-modeless

Barebone modeless/modal dialog box component for React

Modeless dialog boxes, which stay on the screen and are available for use at any time but permit other user activities

Modal dialog boxes, which require the user to respond before continuing the program

Demo & Example

Live demo: florinn.github.io/react-modeless

To build the example locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

Installation

The easiest way to use react-modeless is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).

You can also use the standalone build by including dist/react-modeless.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

npm install react-modeless --save

Usage

import DialogBox from 'react-modeless'

<DialogBox
	isOpen={isDialogOpen}
	onClose={onClose}
	style={dialogStyle}
	containerClassName={containerClass}
	noBackdrop={!isDialogModal}
	clickBackdropToClose={false}>
	<div className='content'>
		<h2>This is a dialog box</h2>
		<button onClick={onClose}>Close dialog</button>
	</div>
</DialogBox>

Properties

• isOpen (bool) - visibility of the dialog
• onClose (func) - handler for the close dialog event
• className (string) - dialog css class
• containerClassName (string) - css class for the outer div element, ancestor to both the dialog and backdrop
• style (object) - dialog inline style
• noBackdrop (bool) - yes (default) means the dialog is modeless; no means the dialog is modal
• clickBackdropToClose (bool) - controls wether the modal dialog is closed when clicking outside it
• backdropClassName (string) - backdrop css class
• backdropStyle (object) - backdrop inline stype

Development (src, dist and the build process)

NOTE: The source code for the component is in src. A transpiled UMD bundle (generated with Babel) is available in dist for use with node.js, browserify, webpack or to be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run npm start. If you just want to watch changes to src and rebuild dist, run npm run watch (this is useful if you are working with npm link).

License

MIT