@alexseitsinger/simple-modal v0.2.16

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, default dark)
  • props.closeButtonVisible Boolean Determine if the close button is visible. (optional, default true)
  • props.closeButtonStyle Object Extra style to apply to the close button. (optional, default {})
  • props.closeButtonPosition String The position of the close button. (optional, default foreground)
  • props.closeButtonBody (Node | Array) The body of the close button. (optional, default close)
  • 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, default SimpleModal)
  • props.layerPosition String The layer position to use for the zIndex. (optional, default above)
  • props.defaultIndex Number The default zIndex to start from. (optional, default 100)
  • props.mainElementSelector String The selector to use to find the main element in the DOM. (optional, default main)
  • props.mountPointSelector String The selector to use to find the mount point element in the DOM> (optional, default body)

Examples

<SimpleModal
  isVisible={true}
  closeButtonPosition={"window"}
  onClose={() => {
    doClose()
  }}
  onEscapeKey={() => {
    doClose()
  }}>
  <div>An example modal body</div>
</SimpleModal>