Modal component for ReactJS with Bootstrap style. React16 support.
npm install react16-modal-bootstrapModal component for React with bootstrap style.
Fork of @zbuttram branch react-16-radium-fix published to NPM.
``bash`
npm install --save react16-modal-bootstrap
bash
bower install --save react16-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