React Modal Bootstrap

Modal component for React with bootstrap style.

Installation

$3

``bash
npm install --save react-modal-bootstrap
`

$3


`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!





Close


Save changes



`

$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

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.