next-share icon indicating copy to clipboard operation
next-share copied to clipboard

[Feature Request] -- Copy link to clipboard support

Open bde-maze opened this issue 2 years ago • 2 comments

Hello there!

Would be coherent to have an option for copy to clipboard. It could have two forms, one just a button with a confirmation (may be a tooltip) to indicate "link copied". The other form could be an input text with the link inside and that copy when clicked.

What do you think ?

bde-maze avatar Jul 30 '22 11:07 bde-maze

I don't know if this comes within the scope of next-share, being an external-sharing library.

Currently I solve this by creating a wrapper over next-share, and adding a separate button.

      <section>
          <FacebookShareButton url={shareData.url} quote={shareData.title} hashtag={shareData.text}
          >
            <FacebookIcon size={32} round />
            <FacebookShareCount url={shareData.url} />
          </FacebookShareButton>

          <TwitterShareButton url={shareData.url} quote={shareData.title} hashtag={shareData.text}
          >
            <TwitterIcon size={32} round />
          </TwitterShareButton>

          <WhatsappShareButton url={shareData.url} quote={shareData.title} hashtag={shareData.text}
          >
            <WhatsappIcon size={32} round />
            </WhatsappShareButton>
        </div>

        <button className="btn btn-primary modal-footer-button"
          onClick={() => {
            navigator.clipboard.writeText(shareData.url);
            toast.info('Copied to clipboard!', {
              position: "bottom-left",
              autoClose: 5000,
              hideProgressBar: true,
              draggable: true,
              progress: undefined,
            });
          }}
        >Copy Link</button>
      </section>

Would be interesting to see what the authors say.

SaadBazaz avatar Aug 05 '22 08:08 SaadBazaz

up please ?

red1 avatar Jan 29 '23 21:01 red1