React component for dialog widget.
React Dialog is available as an npm package.
npm install react-dialog
Use browserify and reactify for dependency management and JSX transformation.
All styles written in CSS and are in css/index.css
http://mohitgupta8888.github.io/react-dialog
import React, { Component } from 'react';
import Dialog from 'react-dialog';
// Be sure to include styles at some point, probably during your bootstrapping
import 'react-dialog/css/index.css';
class Example extends Component {
state = {
isDialogOpen: false
}
openDialog = () => this.setState({ isDialogOpen: true })
handleClose = () => this.setState({ isDialogOpen: false })
render() {
return (
<div className="container">
<button type="button" onClick={this.openDialog}>Open Dialog</button>
{this.state.isDialogOpen &&
<Dialog
title="Dialog Title"
modal
onClose={this.handleClose}
buttons={[{
text: 'Close',
onClick: () => this.handleClose()
}]}
>
<h1>Dialog Content</h1>
<p>More Content. Anything goes here</p>
</Dialog>
}
</div>
);
}
}
Number
||String
- default:
300
- Specifies the width of Dialog (String or Number) '80%' or '500'
Number
||String
- default:
500
- Whether overlay is added to dialog or not
Boolean
- default:
false
- Whether overlay is added to dialog or not
Boolean
- Default:
true
- If true, the
props.onClose
event will be triggered if user presses Esc key on keyboard.
Boolean
- default:
false
- Whether dialog is draggable
Boolean
- default:
false
- Whether dialog is resizable
String
orReactElement
- default:
''
- Title of dialog box. Could be
string
or some react element.
Boolean
- default:
true
- Whether close icon is displayed at dialog title
Boolean
- default:
false
- Whether dialog can be minimized or not
Boolean
- default:
false
- Whether dialog can be maximized (full screen) or not
Function
- default:
null
- Function that will be triggered whenever there is a close event.
[{
text: string,
onClick: Function,
className: string
}]
or
[ReactElements]
- Default:
null
- Represents the collection of buttons to be render in dialog footer
{
x: number,
y: number
}
- default: center of the screen:
{
x: -250, // -width / 2
y: -150 // -height / 2
}
- The shift in the
x
andy
axis relative to the center of the screen ({ x: 0, y: 0 }
)
MIT