Build a headless React UI

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

export function ExportButton({ files }: { files: File[] }) {
  const zip = useEazip();
  const task = zip.task;

  if (!task) {
    return (
      <button onClick={() => zip.download({ files })}>
        Download as ZIP
      </button>
    );
  }

  if (task.state === 'processing') {
    return (
      <div>
        {task.progress ? (
          <progress
            value={task.progress.filesCompleted}
            max={task.progress.filesTotal}
          />
        ) : (
          <progress />
        )}
        <button onClick={() => zip.cancel(task.id)}>
          Cancel
        </button>
      </div>
    );
  }

  if (task.state === 'failed' && task.canRetry) {
    return (
      <button onClick={() => zip.retry(task.id)}>
        Try again
      </button>
    );
  }

  if (task.state === 'completed' || task.state === 'partial') {
    return (
      <button onClick={() => zip.downloadAll(task.id)}>
        Download {task.zips.length > 1 ? 'all ZIPs' : 'ZIP'}
      </button>
    );
  }

  return null;
}