0.2.3 • Published 8 years ago
react-with-modal v0.2.3
react-with-modal
A lightweight React modal component for Bootstrap v3 and Bootstrap v4.
Use this bootstrap modal component if:
- You want a lightweight component. It has no external dependencies except for React.
- You use Bootstrap 3 or 4.
- You prefer using higher order components to keep state out of your UI components.
Installation
npm install --save react-with-modal
Usage
react-with-modal requires you to wrap the component that has the modal with withModal
, which passes the modalProps
property to the wrapped component.
modalProps
has the following shape:
Property | Type | Description |
---|---|---|
open | Function | Call this function to open the modal. Does not take any arguments. |
close | Function | Call this function to close the modal. Does not take any arguments. |
isOpen | Boolean | True when the modal is open and false otherwise |
You have to pass the modalProps into the Modal component to be able to open/close it:
// component with modal
import React from 'react';
import {
Modal
withModal,
propTypes as modalPropTypes
} from 'react-with-modal';
class Example extends React.Component {
static propTypes = {
modalProps: React.PropTypes.shape({
close: modalPropTypes.close,
open: modalPropTypes.open
})
}
render () {
<div>
<Modal {...this.props.modalProps}>
<div>
<button onClick={this.props.modalProps.close}>
Close Modal
</button>
</div>
</Modal>
<button onClick={this.props.modalProps.open}>
Open Modal
</button>
</div>
}
}
// wrap the component with the modal wrapper
export default withModal(Example);
Styling
This component works with both Bootstrap v3 and Bootstrap v4.
Styles aren't included automatically with this component, and you need to add it to your app separately.
Demo & Examples
To build the examples locally, clone this repo and run:
npm install
webpack-dev-server
and then navigate to http://localhost:8080/examples/