React Modal Bootstrap
Modal component for React with bootstrap style.
Installation
NPM
npm install --save react-modal-bootstrap
Bower
bower install --save react-modal-bootstrap
Usage
Dependencies
Webpack:
;
Without Webpack:
JS
;...state = isOpen: false; { this;}; { this;};...<Modal isOpen=thisstateisOpen onRequestHide=thishideModal> <ModalHeader> <ModalClose onClick=thishideModal/> <ModalTitle>Modal title</ModalTitle> </ModalHeader> <ModalBody> <p>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!</p> </ModalBody> <ModalFooter> <button className='btn btn-default' onClick=thishideModal> Close </button> <button className='btn btn-primary'> Save changes </button> </ModalFooter></Modal>
Styles
Default:
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.
UMD
...var Modal = windowReactModalBootstrapModal;var ModalHeader = windowReactModalBootstrapModalHeader;var ModalTitle = windowReactModalBootstrapModalTitle;var ModalClose = windowReactModalBootstrapModalClose;var ModalBody = windowReactModalBootstrapModalBody;var ModalFooter = windowReactModalBootstrapModalFooter;...
Example here
Props
Name | Type | Default | Description |
---|---|---|---|
isOpen | bool | false | |
backdrop | bool | true | Close when click on backdrop |
keyboard | bool | true | Close when press ESC |
size | string | '' | 'modal-lg' or 'modal-sm' |
onRequestHide | function | function(){} | Callback when modal request hide |
backdropStyles | object | {} | Styles object (Radium) |
dialogStyles | object | {} | Styles object (Radium) |
Example
View demo or example folder.