Accessible modal dialog component for ReactJS
You can find this npm package by clicking on : https://www.npmjs.com/package/asean-react-modal
- Node.js v16.14.2 or latest version.
- react v18.2.0
- react-dom v18.2.0
In your project, run this command :
$ npm install asean-react-modal
or
$ yarn add asean-react-modal
import {useState} from 'react'
import {Modal} from 'asean-react-modal'
const [showModal, setShowModal] = useState(false)
const hideModal = () => showModal && setShowModal(false)
<Modal
show={showModal}
onClickCloseBtn={hideModal}
>
<h1>Your modal text here</h1>
</Modal>
setShowModal(true)
<Modal
show={showModal}
onClickCloseBtn={hideModal}
>
<h1>Your content here</h1>
</Modal>
<Modal
show={showModal}
onClickCloseBtn={hideModal}
bEscapeClose=true
>
<h1>Your content here</h1>
</Modal>
<Modal
show={showModal}
onClickCloseBtn={hideModal}
bClicWrapperClose=true
>
<h1>Your content here</h1>
</Modal>
<Modal
show={showModal}
onClickCloseBtn={hideModal}
xButton=true
>
<h1>Your content here</h1>
</Modal>
- define new background styles
const bgStyles = {background: 'white'}
- add style in modal props
<Modal
show={showModal}
onClickCloseBtn={hideModal}
backgroundStyles = {bgStyles}
>
<h1>Your content here</h1>
</Modal>
- define new button styles
const btnStyles = {background:'black', color:'white', borderColor:'yellow'}
- add style in modal props
<Modal
show={showModal}
onClickCloseBtn={hideModal}
backgroundStyles = {bgStyles}
>
<h1>Your content here</h1>
</Modal>
- React :
- react
- react-dom
- Babel 7 : @babel/core, @babel/cli, @babel/preset-env, @babel/polyfill