I want to add a "download button on modal carousel using react-images, the button should be available on modal popup

Question

can i add a button as a parameter to the carousel,i tried all possible ways to add a button to this

<div>
  <h2>Using with a Lightbox component</h2>
  <Gallery photos={photos} onClick={openLightbox} />

  <ModalGateway>
    {viewerIsOpen ? (
      <Modal onClose={closeLightbox}>
        <Carousel
          currentIndex={currentImage}
          views={photos.map(x => ({
            ...x,
            srcset: x.srcSet,
            caption: x.title
          }))}
        />
      </Modal>
    ) : null}
  </ModalGateway>
  <div>
    <Down />
  </div>
</div>

Answer 1

You can create your own component:

const CustomFooter = ({ isModal, currentView }) => isModal && (
  <div className="react-images__footer">
    <button
      className="btn some-stylin"
      type="button"
      onClick={() => { downloadImage(currentView.src); }}
    >
      Download
    </button>
  </div>
);

<ModalGateway>
    {modalIsOpen ? (
        <Modal onClose={this.toggleGallery}>
            <Carousel
              views={this.imgs}
              currentIndex={currentIndex}
              frameProps={{ autoSize: 'height' }}
              components={{ Footer: CustomFooter }}
            />
        </Modal>
    ) : null}
</ModalGateway>