@reactsnap/react

useReactSnap(baseOptions?)#

The hook returns a target ref plus helper functions for PNG, JPEG, and WebP export.

import { useReactSnap } from '@reactsnap/react';

function CardExporter() {
  const { ref, exportPng, exportJpeg, exportWebp } = useReactSnap({
    scale: 2,
    background: '#f8fafc',
  });

  return (
    <>
      <div ref={ref}>{/* render card here */}</div>
      <button onClick={() => void exportPng('card.png')}>Export PNG</button>
    </>
  );
}

Behavior#

• The hook throws if the target ref is not attached.
• Passing a filename triggers downloadBlob after the browser render completes.
• Omitting the filename returns the Blob, which is useful for live preview flows like the invoice demo on this site.

Best use cases#

• Export buttons inside product UIs
• Marketing asset builders driven by React props
• Internal tooling where the preview surface and the export action live in the same component tree