React

@eazip/react combines the Eazip browser engine with a hook and a ready-made download tray. Use it when your application already uses React.

1. Install

npm install @eazip/react

Requires React 18 or later.

2. Add a ZIP download

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

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 />
    </>
  );
}

MyFileList represents your own UI. The three Eazip pieces have distinct jobs:

• useEazip() gives your component the download commands and current task.
• zip.download(...) starts a job and returns its task ID immediately.
• <EazipTray /> handles progress, cancel, retry, partial results, and the completed download.

No provider or CSS import is required for this basic setup.

3. Pass files or URLs

The same files option accepts:

• browser File, FileList, and Blob objects;
• URL strings such as https://assets.example.com/hero.png;
• { file, filename } or { url, filename } when you need to control the path inside the ZIP.

You can mix these shapes in one array. Remote URLs used by Local jobs must allow browser requests; see Inputs and sources.

4. Move larger URL jobs to Cloud

For multi-gigabyte archives, thousands of URLs, or jobs that must survive a reload, keep the same hook and tray and change the execution strategy:

zip.download({
  strategy: 'cloud',
  publicKey: 'pk_ez_...',
  files: urls,
});

Cloud jobs accept remote URLs rather than browser File or Blob objects. Read When to use Eazip Cloud before configuring a public key.

Next steps

• Customize the <EazipTray />.
• Control tasks directly with useEazip().
• Learn the shared Local and Cloud job model.