Share

share adds a share button. It is off by default.

<Lightbox share {...props} />

<Lightbox
  share={{ url: (slide, index) => `https://example.com/photos/${index + 1}` }}
  {...props}
/>

How it worksCopy Anchor Link

• Where the system share sheet exists, the button calls navigator.share with the link and the slide's string title, or its alt.
• Where it does not, the link is copied with navigator.clipboard. The icon turns into icons.linkCopied for a moment and labels.linkCopied is announced.
• Cancelling the share sheet does nothing.
• If the link can be neither shared nor copied, labels.shareError is announced.
• When neither API exists, for example over plain http, the button is not rendered.

No third-party script, SDK or share URL is involved, so nothing changes in your Content Security Policy.

Link to the open slideCopy Anchor Link

The link is window.location.href by default. With useLightboxHash, that URL already points at the open slide:

const [index, setIndex] = useLightboxHash("photo", { count: slides.length });

<Lightbox
  share
  slides={slides}
  open={index >= 0}
  index={Math.max(index, 0)}
  onIndexChange={setIndex}
  onClose={() => setIndex(-1)}
/>;