Partly a port of jschr's bootstrap modal. Reimplements the Twitter Bootstrap Modal component in a React friendly way. Based on the original work of the react-bootstrap team.
note: React bootstrap modal is compatible with bootstrap 3.3.4+ if you want to use it with an earlier version of bootstrap 3 you need to override the .modal-backdrop styles to be the most recent one.
- Scoped focus
- Stackable! (use with constraint)
- Animated feedback when trying to close a "static" Modal
- Straightforward API, no ModalTrigger or Overlay mixins to deal with
var Modal = require('react-bootstrap-modal')
class ModalExample extends React.Component {
render(){
let closeModal = () => this.setState({ open: false })
let saveAndClose = () => {
api.saveData()
.then(() => this.setState({ open: false }))
}
return (
<div>
<button type='button'>Launch modal</button>
<Modal
show={this.state.open}
onHide={closeModal}
aria-labelledby="ModalHeader"
>
<Modal.Header closeButton>
<Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Some Content here</p>
</Modal.Body>
<Modal.Footer>
// If you don't have anything fancy to do you can use
// the convenient `Dismiss` component, it will
// trigger `onHide` when clicked
<Modal.Dismiss className='btn btn-default'>Cancel</Modal.Dismiss>
// Or you can create your own dismiss buttons
<button className='btn btn-primary' onClick={saveAndClose}>
Save
</button>
</Modal.Footer>
</Modal>
</div>
)
}
}
ReactDOM.render(<ModalExample />, document.body);If you are already including Twitter Bootstrap styles (e.g. bootstrap.min.css), then include /lib/css/rbm-patch.css.
If you want to use this module without Twitter Bootstrap, then include /lib/css/rbm-complete.css.
If you do not like the Bootstrap visual look and feel, you can adjust variables.less to suit your needs and transpile it to css yourself.
The main Modal Component.
-
show:Boolean(default false)make the Modal visible or hidden -
backdrop:Enum<'static', true, false>(default true)- Should the modal render a backdrop overlay."static"backdrops are not dismissible by clicking the backdrop. -
keyboard:Boolean(default true)Modal is dismissible via theesckey -
transitionBoolean(default true)Fade the entry and exit of the modal. You can also provide a Transition component from thereact-transition-groupv2 library to customize the animation more minutely. -
attentionClass:String(default 'shake')- an animation class added to the modal when a "static" backdrop is clicked, set to nothing if no animation is desired -
container:Node(default document.body), a DOM Node to append the modal too -
onEnter: handler fires right before the Modal animates in -
onEntering: handler fires as the Modal starts entering -
onEntered: handler fires after the enter animation finishes -
onExit: handler fires right before the Modal animates out -
onExiting: handler fires as the Modal starts exiting -
onExited: handler fires after the exit animation finishes
The Header section of Modal. If not included be sure to add an aria-labelledby elsewhere to keep the Modal accessible.
closeButton:Boolean(default true)- render a close button or notonClose:Function()- a Handle when the close button is clicked. if leftundefinedthe Header will automatically wire itself into the parent ModalonHide(), so you only need to specify a handler if you want a different behavior
The main content of the Modal, a convenience Component for: <div className='modal-body'>content</div>
The bottom footer of the Modal, a convenience Component for: <div className='modal-footer'>content</div>
A dismiss button for the Parent Modal. Dismiss button will trigger its parent Modal onHide() handler. You don't need to use a Dismiss button, they are just a Convenience Component.
BaseModal represents just the modal markup without any of the logic to render it to the document.body. It is generally not recommended that you work with this component directly. You can use it if you really want to render a Modal inline.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent