This content originally appeared on DEV Community and was authored by DEV Community
react-js-dialog-box
simple react.js modal box
Intro
Install
npm install --save react-js-dialog-box
Usage
import React from 'react'
import { ReactDialogBox } from 'react-js-dialog-box'
import 'react-js-dialog-box/dist/index.css'
class App extends React.Component {
constructor() {
super()
this.state = {
isOpen: false
}
}
openBox = () => {
this.setState({
isOpen: true
})
}
closeBox = () => {
this.setState({
isOpen: false
})
}
render() {
return (
<div>
<button onClick={this.openBox}>Open ReactDialogBox </button>
{this.state.isOpen && (
<>
<ReactDialogBox
closeBox={this.closeBox}
modalWidth='60%'
headerBackgroundColor='red'
headerTextColor='white'
headerHeight='65'
closeButtonColor='white'
bodyBackgroundColor='white'
bodyTextColor='black'
bodyHeight='200px'
headerText='Hearder '
>
<div>
<h1>Dialog Content</h1>
</div>
</ReactDialogBox>
</>
)}
</div>
)
}
}
export default App
License
MIT © abodmicheal
This content originally appeared on DEV Community and was authored by DEV Community
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.

APA
MLA
DEV Community | Sciencx (2021-09-21T00:08:39+00:00) React dialog box library. Retrieved from https://www.scien.cx/2021/09/21/react-dialog-box-library/
" » React dialog box library." DEV Community | Sciencx - Tuesday September 21, 2021, https://www.scien.cx/2021/09/21/react-dialog-box-library/
HARVARDDEV Community | Sciencx Tuesday September 21, 2021 » React dialog box library., viewed ,<https://www.scien.cx/2021/09/21/react-dialog-box-library/>
VANCOUVERDEV Community | Sciencx - » React dialog box library. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/21/react-dialog-box-library/
CHICAGO" » React dialog box library." DEV Community | Sciencx - Accessed . https://www.scien.cx/2021/09/21/react-dialog-box-library/
IEEE" » React dialog box library." DEV Community | Sciencx [Online]. Available: https://www.scien.cx/2021/09/21/react-dialog-box-library/. [Accessed: ]
rf:citation » React dialog box library | DEV Community | Sciencx | https://www.scien.cx/2021/09/21/react-dialog-box-library/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.