@atis/react-bootstrap-modal
v3.0.5
Published
React Bootstrap Modal ===================================
Downloads
37
Maintainers
Readme
React Bootstrap Modal
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.
Features
- 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
Use
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>
)
}
}
React.render(<ModalExample />, document.body);
Modal
The main Modal Component.
Props
show
:Boolean(default false)
make the Modal visible or hiddenbackdrop
: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 theesc
keytransition
Boolean(default true)
Fade the entry and exit of the modal. You can also provide a Transition component from thereact-overlays
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 desiredcontainer
:Node(default document.body)
, a DOM Node to append the modal tooonEnter
: handler fires right before the Modal animates inonEntering
: handler fires as the Modal starts enteringonEntered
: handler fires after the enter animation finishesonExit
: handler fires right before the Modal animates outonExiting
: handler fires as the Modal starts exitingonExited
: handler fires after the exit animation finishes
Modal.Header
The Header section of Modal. If not included be sure to add an aria-labelledby
elsewhere to keep the Modal accessible.
Props
closeButton
:Boolean(default true)
- render a close button or notonClose
:Function()
- a Handle when the close button is clicked. if leftundefined
the Header will automatically wire itself into the parent ModalonHide()
, so you only need to specify a handler if you want a different behavior
Modal.Title
Modal.Body
The main content of the Modal, a convenience Component for: <div className='modal-body'>content</div>
Modal.Footer
The bottom footer of the Modal, a convenience Component for: <div className='modal-footer'>content</div>
Modal.Dismiss
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.
Modal.BaseModal
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.
Styles
You can use this module separate from Twitter Bootstrap by just including the /lib/styles/rbm-complete.css
file, or if you are using bootstrap and don't want to re-include styles you can just use /lib/styles/rbm-patch.css
.
If you don't like the bootstrap visual look and feel, you can adjust variables.less
to suit your needs.