1.2.0 • Published 3 years ago
react-modal-dialog-component v1.2.0
react-modal-dialog-component
Install
npm install --save react-modal-dialog-componentDemo
Usage
import React, { Component } from 'react'
import ModalDialogComponent from 'react-modal-dialog-component'
import styles from './styles.css'
export default class App extends Component {
contentElement = (<div><div><h1>Lorem Ipsum</h1></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>)
render () {
return (
<div>
<ModalDialogComponent
headerContent={<h2>Modal Header</h2>}
footerContent={<h3>Footer Header</h3>}
mainContent={this.contentElement}
openButtonText="Click for modal dialog opening"
btnClass={"button"}
closeOnOutsideModalClick={true} />
</div>
)
}
}API
| Prop | Type | Default | Description | Example |
|---|---|---|---|---|
| headerContent | ReactNodeLike | 3 | The element/text to display in the footer of modal dialog. | headerContent={<h2>Modal Header</h2>} |
| mainContent | ReactNodeLike | The element/text to display in the body of modal dialog. | mainContent={(<div><div><h1>Lorem Ipsum</h1></div><div>Excepteur sint occaecat cupidatat non proident.</div></div>)} | |
| footerContent | ReactNodeLike | 'Show more' | The element/text to display in the footer of modal dialog. | footerContent={<h3>Footer Header</h3>} |
| openButtonText | string | 'Show less' | The text to display in the button for openeing of the modal dialog. | openButtonText="Click for modal dialog opening" |
| btnClass | string | Class name(s) to add on button element. | btnClass={"button"} | |
| dialogClass | string | Class name(s) to add on main dialog wrapper. | dialogClass={"my-dialog"} | |
| closeOnOutsideModalClick | boolean | false | Allow close of modal dialog on clicking outside of the modal window | closeOnOutsideModalClick={true} |
| modalHeaderClass | string | Additional css class name(s) to add on modal dialog header. | modalHeaderClass={"modal-header"} | |
| modalBodyClass | string | Additional css class name(s) to add on modal dialog body. | modalBodyClass={"modal-body"} | |
| modalFooterClass | string | Additional css class name(s) to add on modal dialog footer. | modalFooterClass={"modal-footer"} |
License
MIT © DEVZONE TECH