ヘッドレスReactファイルアップロード

10KB

軽量

コアバンドルはgzip圧縮で10KB未満。最適なサイズのためにツリーシェイキング対応。

TypeScript

包括的な型定義を持つTypeScriptで記述。

ゼロ依存

ランタイム依存なし。ピア依存としてReactのみ必要。

機能

🎨

ヘッドレス設計

組み込みUIコンポーネントなし。外観と操作感を完全にコントロール。思い通りのアップロード体験を構築。

📂

ドラッグ＆ドロップ

ドラッグ中に有効・無効なファイルタイプの視覚的フィードバックを備えた直感的なドラッグ＆ドロップファイル選択。

📊

アップロード進捗

個別ファイルと全体のアップロード進捗をリアルタイム追跡。美しいプログレスインジケーターを構築。

✅

ファイル検証

ファイルタイプ、サイズ、寸法の組み込み検証。特定のニーズに合わせたカスタム検証ルールを追加可能。

☁️

クラウドストレージ

署名付きURLを使用してS3、Google Cloud Storage、Azure Blobなどに直接アップロード。サーバープロキシ不要。

🔄

チャンクアップロード

大きなファイルをチャンクに分割して信頼性の高いアップロード。tusプロトコルによる再開可能なアップロードをサポート。

🖼️

画像処理

アップロード前に画像を圧縮、リサイズ、クロップ。EXIF向き問題を自動修正。

📱

React Native

ネイティブアダプターでReact Nativeで動作。WebとモバイルアプリケーションでAPIを共通化。

🌐

SSR対応

Next.js、Remix、その他のSSRフレームワークとシームレスに動作。ハイドレーション問題なし。

クイックスタート

1. インストール

npm install @samithahansaka/dropup

2. 使用方法

import { useDropup } from '@samithahansaka/dropup';

function Uploader() {
  const { files, actions, getDropProps, getInputProps } = useDropup({
    accept: 'image/*',
    upload: { url: '/api/upload' },
  });

  return (
    <div {...getDropProps()}>
      <input {...getInputProps()} />
      <p>Drop files here</p>

      {files.map(file => (
        <div key={file.id}>
          {file.name} - {file.progress}%
        </div>
      ))}

      <button onClick={() => actions.upload()}>Upload</button>
    </div>
  );
}