React Modal Bootstrap (React 16)

Modal component for React with bootstrap style.

Fork of @zbuttram branch react-16-radium-fix published to NPM.

Installation

$3

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

$3


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





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.