DropzoneImages

<DropzoneImages />

<Toggle>
  {({ on, toggle }) => {
    const dropzoneImagesRef = createRef()
    const handleModalBtnResetClick = () => {
      dropzoneImagesRef.current.resetImages()
      toggle()
    }
    return (
      <div>
        <DropzoneImages ref={dropzoneImagesRef} onBtnResetClick={toggle} />
        <Modal isVisible={on} onClose={toggle}>
          <ModalTitle>Clear all photos</ModalTitle>
          <div className="p-4">
            <BodyText>
              This will clear all photos you just just added to the list.
              Continue?
            </BodyText>
          </div>
          <ModalActions>
            <Button theme="secondary" onClick={toggle}>
              Cancel
            </Button>
            <Button onClick={handleModalBtnResetClick}>Confirm</Button>
          </ModalActions>
        </Modal>
      </div>
    )
  }}
</Toggle>

<DropzoneImages
  txtBtnReset="Reset"
  txtBtnConfirm="Save"
  onBtnConfirmClick={() => {}}
/>

<DropzoneImages>
  <div className="d-flex align-items-center flex-column justify-content-center p-4">
    <BodyText className="mb-0">
      Any content provided as children to this component will be rendered as
      the placeholder
    </BodyText>
    <BodyText className="mb-0">Including other components!</BodyText>
  </div>
</DropzoneImages>