Skip to main content

​
SyncsnapQrCode

SyncsnapQrCode renders a QR code image that encodes the upload URL for a given job. The URL is built with createUploadUrl so the user’s phone opens the correct SyncSnap upload page with the job ID.

​
When to use

  • SyncsnapUploadButton — Use when you want the default button + dialog; it uses the QR internally.
  • SyncsnapQrCode — Use when you build your own UI (e.g. custom modal, different layout) and only need the QR image.
You must have a jobId (from creating a job via your backend or useSyncsnapJob) before rendering this component.

​
Basic usage

import { SyncsnapQrCode } from "@syncsnap/react";

<SyncsnapQrCode jobId={jobId} />
Renders a 240×240 QR code by default. The encoded URL is https://upload.syncsnap.xyz/?job_id=<jobId> unless you pass baseUrl.

​
Props

PropTypeDefaultDescription
jobIdstringrequiredThe SyncSnap job ID (from job creation).
baseUrlstring"https://upload.syncsnap.xyz/"Base URL for the upload page. The final URL is baseUrl + "?job_id=" + jobId.
sizenumber240Width and height of the QR image in pixels.
classNamestring—Applied to the <img> element.
errorCorrectionLevel"L" | "M" | "Q" | "H""M"QR error correction level.

​
Custom base URL

For staging or a custom upload host: 
<SyncsnapQrCode
  jobId={jobId}
  baseUrl="https://upload.staging.syncsnap.xyz/"
  size={280}
/>

​
With useSyncsnapJob

Typical pattern: start a job with the hook, then show the QR when you have a jobId: 
const { jobId, start, isPolling, error } = useSyncsnapJob({
  onCompleted: (job, presignedUrl) => { /* ... */ },
});

return (
  <>
    <button onClick={() => start()} disabled={isPolling}>
      {isPolling ? "Preparing..." : "Show QR"}
    </button>
    {error && <p>{error.message}</p>}
    {jobId && <SyncsnapQrCode jobId={jobId} size={260} />}
  </>
);
The component renders nothing until the QR data URL is generated (brief delay); it does not show a loading state by default. Add your own loading UI if needed.