React-Maxwell-Modal
React-Maxwell-Modal Github Page
Install
npm install react-maxwell-modal --save
Usage
There are four types of modals available
Content Modal
Props
Prop | Type | Required |
---|---|---|
onShow | function | false |
onHide | function | true |
isOpen | bool | false |
shouldCloseOnOverlayClick | bool | false |
; Component { superprops; thisstate = isOpen: false thisdisplayName = 'ContentModalExample'; thistoggleModal = thistoggleModal; } { this } { return <div className="ClickMeMaxwellModal"> <button onClick=thistoggleModal>Load Modal</button> <ContentModal ref="mymodal" isOpen=thisstateisOpen shouldCloseOnOverlayClick=true onHide=thistoggleModal > <span>A bunch of useless stuff</span> </ContentModal> </div> ; }
Maxwell Modal
Props
Prop | Type | Required |
---|---|---|
footer | ReactComponent/String | false |
onShow | function | false |
onHide | function | true |
title | string | false |
isOpen | bool | false |
dismissable | bool | false |
shouldCloseOnOverlayClick | bool | false |
; Component { superprops; thisstate = isOpen: false thisdisplayName = 'MaxwellModalExample'; thistoggleModal = thistoggleModal; } { this } { return <div className="ClickMeMaxwellModal"> <button onClick=thistoggleModal>Load Modal</button> <MaxwellModal ref="mymodal" isOpen=thisstateisOpen title="this is a title" shouldCloseOnOverlayClick=true onHide=thistoggleModal > <span>A bunch of useless stuff</span> </MaxwellModal> </div> ; }
Confirm Modal
A replacement for the confirm box.
This produces a modal with two buttons, yes
and no
. Their labels are configurable, as well as what occurs on yes
and no
.
Props
Prop | Type | Required |
---|---|---|
onYes | function | false |
onNo | function | false |
yesLabel | string | false |
noLabel | string | false |
onShow | function | false |
onHide | function | true |
title | string | false |
isOpen | bool | false |
dismissable | bool | false |
shouldCloseOnOverlayClick | bool | false |
; Component { superprops; thisstate = isOpen: false thisdisplayName = 'ConfirmModalExample'; thistoggleModal = thistoggleModal; thisonYes = thisonYes; thisonNo = thisonNo; } { } { } { this } { return <div className="ClickMeMaxwellModal"> <button onClick=thistoggleModal>Load Modal</button> <ConfirmModal ref="mymodal" isOpen=thisstateisOpen shouldCloseOnOverlayClick=true onHide=thistoggleModal onYes=thisonYes onNo=thisonNo > <span>A bunch of useless stuff</span> </ConfirmModal> </div> ; }
Alert Modal
A replacement for the alert box
Props
Prop | Type | Required |
---|---|---|
onYes | function | false |
yesLabel | string | false |
onShow | function | false |
onHide | function | true |
title | string | false |
isOpen | bool | false |
dismissable | bool | false |
shouldCloseOnOverlayClick | bool | false |
; Component { superprops; thisstate = isOpen: false thisdisplayName = 'AlertModalExample'; thistoggleModal = thistoggleModal; thisonYes = thisonYes; } { } { this } { return <div className="ClickMeMaxwellModal"> <button onClick=thistoggleModal>Load Modal</button> <AlertModal ref="mymodal" isOpen=thisstateisOpen shouldCloseOnOverlayClick=true onHide=thistoggleModal onYes=thisonYes > <span>A bunch of useless stuff</span> </AlertModal> </div> ; }