Getting Started
Install @eazip/react and ship your first ZIP download in a few lines.
Install
Eazip is in public beta — APIs may still shift before 1.0:
npm install @eazip/reactRequires React 18+. Files are zipped in the browser by default (via
@eazip/core) — nothing is uploaded.
Add an exporter
zip.download(...) is fire & forget: it kicks off the export and returns
immediately. <EazipTray /> takes it from there — an inline floating tray
that shows progress, completion, partial results, failures, and expiry, then
gets out of the way. No CSS import, no provider, no configuration required.
import { useEazip, EazipTray } from '@eazip/react'
function Exporter({ files }) {
const zip = useEazip()
return (
<>
<button onClick={() => zip.download({ files })}>
Download as ZIP
</button>
{/* progress, cancel & retry — built in */}
<EazipTray />
</>
)
}files accepts File[], a FileList, URL strings, or @eazip/core source
objects — mix local blobs and remote URLs freely:
zip.download({
files: [
{ file: blob, filename: 'notes.txt' },
{ url: 'https://assets.example.com/hero.png' },
],
zipName: 'assets.zip',
});Errors never reject the call — they land on zip.task and render as a calm,
recoverable state in the tray.
<EazipTray /> props
| Prop | Default | Description |
|---|---|---|
placement | 'corner' | 'corner' (bottom-right), 'bar' (bottom-center), 'anchored' (top-right) |
theme | 'auto' | 'light', 'dark', or follow prefers-color-scheme |
accent | '#3056d3' | accent color for progress and highlights |
autoDownload | true | start the download automatically when the zip is ready |
autoHideMs | 20000 | auto-dismiss delay after a started download; 0 disables |
locale | 'en' | 'en' or 'ja' |
messages | — | partial override of any tray copy |
className | — | extra class on the tray root |
zIndex | 9999 | stacking context for the tray |
offset | — | { x, y } pixel shift from the default anchor |
container | document.body | portal target |
onStateChange | — | called on task state transitions |
Scale to the cloud
Browser-side zipping holds everything in memory and dies with the tab. For hundreds or thousands of files — or multi-gigabyte exports — flip one option to hand the job to Eazip Cloud:
zip.download({ strategy: 'cloud', publicKey: 'pk_ez_...', files: urls });Same API, same <EazipTray />, same UX — the tray gains resumable progress,
24-hour download links, and automatic multi-zip splitting for huge exports.
Get a public key at eazip.io.