npm install react-dialogsh
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
Demo
http://mohitgupta8888.github.io/react-dialog
Usage
`javascript
import Dialog from 'react-dialog'
class Example extends React.Component {
constructor() {
super();
this.state = {
isDialogOpen: false
}
}
openDialog = () => this.setState({ isDialogOpen: true })
handleClose = () => this.setState({ isDialogOpen: false })
render() {
return (
{
this.state.isDialogOpen &&
title="Dialog Title"
modal={true}
onClose={this.handleClose}
buttons={
[{
text: "Close",
onClick: () => this.handleClose()
}]
}>
Dialog Content
More Content. Anything goes here
}
);
}
}
`
API
#### props.height
- Number
- default: 300
- Whether overlay is added to dialog or not
#### props.width
- Number
- default: 500
- Whether overlay is added to dialog or not
#### props.modal
- Boolean
- default: false
- Whether overlay is added to dialog or not
#### props.closeOnEscape
- Boolean
- Default: true
- If true, the props.onClose event will be triggered if user presses Esc key on keyboard.
#### props.isDraggable
- Boolean
- default: false
- Whether dialog is draggable
#### props.isResizable
- Boolean
- default: false
- Whether dialog is resizable
#### props.title
- String or ReactElement
- default: ''
- Title of dialog box. Could be string or some react element.
#### props.hasCloseIcon
- Boolean
- default: true
- Whether close icon is displayed at dialog title
#### props.allowMinimize
- Boolean
- default: false
- Whether dialog can be minimized or not
#### props.allowMaximize
- Boolean
- default: false
- Whether dialog can be maximized (full screen) or not
#### props.onClose
- Function
- default: null
- Function that will be triggered whenever there is a close event.
#### props.buttons
`
[{
text: string,
onClick: Function,
className: string
}]
or
[ReactElements]
`
- Default: null`