Modal

Modal window component.

Usage

Example

Script


  const [modal, setModal] = useState(false);

  const toggle = ()=>{
    setModal(!modal);
  }

  return (
    <>
      <CButton
        onClick={toggle}
        className="mr-1"
      >Launch demo modal</CButton>
      <CModal
        show={modal}
        onClose={toggle}
      >
        <CModalHeader closeButton>Modal title</CModalHeader>
        <CModalBody>
          Lorem ipsum dolor...
        </CModalBody>
        <CModalFooter>
          <CButton color="primary">Do Something</CButton>{' '}
          <CButton
            color="secondary"
            onClick={toggle}
          >Cancel</CButton>
        </CModalFooter>
      </CModal>
    </>
  )

# Features

Many customization options
Easily manage modal visibility

Modal is hidding after click on one of following triggers:

Close button in the default header
'OK' and 'Cancel' buttons in the footer
Backdrop (when closeOnBackdrop prop is true)

# Modal API

Name	Type	Default Value
children	any
children components
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
show	boolean
show dialog box
centered	boolean
show dialog box
size	(sm \| lg \| xl)
show dialog box
backdrop	boolean	true
show dialog box
color	string
show dialog box
borderColor	string
show dialog box
onOpened	Function
show dialog box
onClosed	Function
show dialog box
fade	boolean	true
show dialog box
closeOnBackdrop	boolean	true
show dialog box
onClose	Function
show dialog box
addContentClass	string
show dialog box

ModalHeader

# ModalHeader API

Name	Type	Default Value
tag	any	header
main HTML tag name
children	any
children components
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
closeButton	boolean
show dialog box

ModalBody

# ModalBody API

Name	Type	Default Value
tag	any	div
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag

ModalFooter

# ModalFooter API

Name	Type	Default Value
tag	any	footer
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag