Multi-Framework SDK Boilerplate Hub

import { useState } from 'react';
import { compressImage, compressPDF } from '100kb-sdk';

export function DocumentUploader() {
  const [isProcessing, setIsProcessing] = useState(false);

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setIsProcessing(true);
    
    // 100% Client-Side WebAssembly Execution in Browser RAM
    const { blob, sizeBytes } = file.type === 'application/pdf' 
      ? await compressPDF(file, { targetKB: 200 })
      : await compressImage(file, { targetKB: 100, mimeType: 'image/jpeg' });

    console.log(`Compressed to ${(sizeBytes / 1024).toFixed(1)}KB`);
    setIsProcessing(false);
    // Upload small 100KB blob directly to AWS S3 / Cloudflare R2!
  };

  return <input type="file" onChange={handleFileUpload} disabled={isProcessing} />;
}