Skip to main content

Share box

ShareBox captures its children as an image with html2canvas and shares it through the Web Share API. Tapping the box generates a PNG snapshot; tapping the snapshot opens the native share sheet.

Example

<ShareBox
  title="idea2app"
  text="Every idea of yours is worth our efforts to realize"
  url="https://idea2app.cn"
>
  <Nameplate name="idea2app" avatar="https://github.com/idea2app.png" />
</ShareBox>

Usage

import { ShareBox } from 'idea-react';

<ShareBox title="My poster" text="Check this out!">
<section className="p-4 text-center">
<h2>Event poster</h2>
<p>Rendered DOM content becomes a shareable image.</p>
</section>
</ShareBox>;

All ShareData fields (title, text, url, files) pass to navigator.share(). The snapshot regenerates on window resize, and a Loading overlay is shown while the image renders.