Modal component for ReactJS with Bootstrap style.
npm install react-modal-bootstrapModal component for React with bootstrap style.
``bash`
npm install --save react-modal-bootstrap
bash
bower install --save react-modal-bootstrap
`Usage
$3
Webpack:
`js
require('path/to/bootstrap.css');
`Without Webpack:
`html
`$3
`js
import {
Modal,
ModalHeader,
ModalTitle,
ModalClose,
ModalBody,
ModalFooter
} from 'react-modal-bootstrap';
...
state = {
isOpen: false
};openModal = () => {
this.setState({
isOpen: true
});
};
hideModal = () => {
this.setState({
isOpen: false
});
};
...
Modal title
Ab ea ipsam iure perferendis! Ad debitis dolore excepturi
explicabo hic incidunt placeat quasi repellendus soluta,
vero. Autem delectus est laborum minus modi molestias
natus provident, quidem rerum sint, voluptas!
`$3
Default:
`js
backdropStyles = {
base: {
background: 'rgba(0, 0, 0, .7)',
opacity: 0,
visibility: 'hidden',
transition: 'all 0.4s',
overflowX: 'hidden',
overflowY: 'auto'
},
open: {
opacity: 1,
visibility: 'visible'
}
};dialogStyles = {
base: {
top: -600,
transition: 'top 0.4s'
},
open: {
top: 0
}
}
`Custom:
You can set custom styles vie
backDropStyles, dialogStyles prop.$3
`html
``js
...
var Modal = window.ReactModalBootstrap.Modal;
var ModalHeader = window.ReactModalBootstrap.ModalHeader;
var ModalTitle = window.ReactModalBootstrap.ModalTitle;
var ModalClose = window.ReactModalBootstrap.ModalClose;
var ModalBody = window.ReactModalBootstrap.ModalBody;
var ModalFooter = window.ReactModalBootstrap.ModalFooter;
...
``Example here