1.0.2 • Published 7 years ago
react-dialog v1.0.2
React Dialog
React component for dialog widget.
Installation
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
Demo
http://mohitgupta8888.github.io/react-dialog
Usage
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 (
<div className="container">
<button type="button" onClick={this.openDialog}>Open Dialog</button>
{
this.state.isDialogOpen &&
<Dialog
title="Dialog Title"
modal={true}
onClose={this.handleClose}
buttons={
[{
text: "Close",
onClick: () => this.handleClose()
}]
}>
<h1>Dialog Content</h1>
<p>More Content. Anything goes here</p>
</Dialog>
}
</div>
);
}
}
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
orReactElement
- 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
- Represents the collection of buttons to be render in dialog footer
License
MIT