A React Modal Wrapper that uses FlexBox to keep it's position, BYOM (bring-your-own-modal). Based off the Portal component by Tajo. Note: This uses flexbox so browser support is iffy. Will post a compatibility table at some point.
npm install react-modal-wrapper --save
;;;; // to load default stylesconst Modal = React;let App = React;ReactDOM;
With accompanying CSS:
The modal expects a single child which is the modal component that you provide.
true, the modal will be open, if
false, the modal will be closed. You have to manage closing it (via state management) so to make life easier see
Renders the passed element where you actually use the
FlexModalWrapper (see example above). It's
onClick handler opens the modal. The prop
closeModal gets passed into your Modal so you can call
this.props.closeModal to close the modal.
true, the modal can be closed by pressing the ESC key.
true, the modal can be closed by click anywhere outside the modal.
Callback that is called when the portal closes.
The class that gets set to the element that wraps your modal. Note: this is where you'll want to set
box-shadow CSS since it wraps your modal with exactly the same dimensions, any
box-shadow on your modal won't show passed the borders of the wrapping element so the
box-shadow would appear to just be a black line typically.
React.PropTypes.bool (defaults to
true, will use an overlay that gets placed behind the modal. Will use default style or use passed
overlayClassName for the overlay style.
Object that will be used as inline styles for the overlay (only if
String that will be used as the class for the overlay (only if
Testing and Examples
You can test the examples by running
and then going to
localhost:8080/basic/ in your browser. There'll be buttons for different modals
To test run
Note: Tests are not yet implemented