@eazip/react

@eazip/react gives you useEazip() and <EazipTray />: a hook that starts zip downloads and a self-contained tray component that narrates progress, completion, partial results, failures, and expiry. No CSS import, no provider, and no configuration are required to get started.

import { EazipTray, useEazip } from '@eazip/react';

function Gallery({ selectedFiles }: { selectedFiles: File[] }) {
  const zip = useEazip();
  return (
    <>
      <button onClick={() => zip.download({ files: selectedFiles })}>
        Download as ZIP
      </button>
      <EazipTray />
    </>
  );
}

npm install @eazip/react

Nothing here needs a context provider or a CSS import to work — useEazip() falls back to a shared internal store, and <EazipTray />'s styles are injected alongside it. Add EazipProvider later if you want shared config (a default publicKey or strategy) or per-test isolation; it's additive, never required.

In this section

• useEazip() — the hook: download(), the current task, and the actions around it.
• <EazipTray /> — every prop, the three placements, and how to embed it inside your own layout.
• Localization — the built-in en/ja catalogs and per-string overrides.
• Persistence & reload-resume — how cloud exports survive a page reload.
• Headless usage — build your own UI on useEazip() without the tray.

New to Eazip? Getting started walks through install and a full useEazip() + <EazipTray /> example. Not using React? @eazip/core is the framework-agnostic engine underneath — this package is a thin, opinionated layer on top of it, not a reimplementation.