React

Add a ZIP download button and a drop-in progress tray to a React application with @eazip/react.

@eazip/react adds a hook and a drop-in download tray to the Eazip.js browser engine. Requires React 18 or later.

Here is what you'll build — try it:

Loading live demo…

Install

npm install @eazip/react

pnpm add @eazip/react

yarn add @eazip/react

bun add @eazip/react

Add a ZIP download

Call zip.download(...) from your existing file list. Render one <EazipTray /> near the root of your application.

App.tsx

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

export default function App() {
  const zip = useEazip();

  return (
    <>
      <MyFileList
        onDownload={(files) => zip.download({ files })}
      />

      <EazipTray />
    </>
  );
}

That's the whole setup — no provider, no CSS import. zip.download(...) starts the job; the tray handles progress, cancel, retry, partial results, and the finished download.

Local is the default

Without a strategy, the ZIP is created in the browser. No account, API key, or backend code is required.

Pass files or URLs

The files option accepts these shapes, mixed freely in one array:

Shape	Example
Browser files	`File`, `FileList`, `Blob`
URL strings	`'https://assets.example.com/hero.png'`
Named entries	`{ url, filename }` or `{ file, filename }`

Remote URLs fetched by Local jobs must allow browser requests — see Inputs and sources.

Add it with your AI assistant

Working in Cursor, Claude Code, or another AI editor? Copy this prompt:

Add a ZIP download to this React app using @eazip/react.

1. Install @eazip/react (requires React 18+).
2. In the component that lists downloadable files, call useEazip() and
   start downloads with zip.download({ files }) — files accepts File,
   FileList, Blob, URL strings, or { url, filename } entries.
3. Render <EazipTray /> once near the app root. Do not add a provider
   or CSS imports.

Reference: https://eazip.io/js/docs/getting-started/react
Full docs for context: https://eazip.io/js/llms-full.txt

Next steps

Bigger jobs: multi-gigabyte or thousand-URL archives keep the same hook and tray — add strategy: 'cloud' and a public key. See When to use Eazip Cloud.
Customize the <EazipTray />.
Control tasks directly with useEazip().
Connect your storage: Supabase, S3, and more sources.