SimpleModal
A modal that can be used with react redux.
Parameters
-
props
object-
props.children
(Node | Array) The child elements to render. -
props.backgroundShade
String The background shade to use. (optional, defaultdark
) -
props.closeButtonVisible
Boolean Determine if the close button is visible. (optional, defaulttrue
) -
props.closeButtonStyle
Object Extra style to apply to the close button. (optional, default{}
) -
props.closeButtonPosition
String The position of the close button. (optional, defaultforeground
) -
props.closeButtonBody
(Node | Array) The body of the close button. (optional, defaultclose
) -
props.onClose
Function The function to invoke when the modal closes. -
props.onOpen
Function The function to invoke when the modal opens. (optional, default()=>{}
) -
props.isVisible
Boolean Determines if the modal is rendered into the DOM. -
props.onEscapeKey
Function The function to invoke when then esacpe key is pressed. (optional, default()=>{}
) -
props.onClickBackground
Function The function to invoke when the background of the modal is clicked. (optional, default()=>{}
) -
props.containerClassName
String The classname to use for the modal container element. (optional, defaultSimpleModal
) -
props.layerPosition
String The layer position to use for the zIndex. (optional, defaultabove
) -
props.defaultIndex
Number The default zIndex to start from. (optional, default100
) -
props.mainElementSelector
String The selector to use to find the main element in the DOM. (optional, defaultmain
) -
props.mountPointSelector
String The selector to use to find the mount point element in the DOM> (optional, defaultbody
)
-
Examples
<SimpleModal
isVisible={true}
closeButtonPosition={"window"}
onClose={() => {
doClose()
}}
onEscapeKey={() => {
doClose()
}}>
<div>An example modal body</div>
</SimpleModal>