@bubblystorage/react

Bubbly Storage React SDK - File upload components for React applications.

Installation

`ash npm install @bubblystorage/react react react-dom

or

yarn add @bubblystorage/react react react-dom

or

pnpm add @bubblystorage/react react react-dom `

Usage

useBubblyStorage Hook

import { useBubblyStorage } from '@bubblystorage/react';

function MyComponent() {
  const { startUpload, isUploading } = useBubblyStorage('my-endpoint', {
    onClientUploadComplete: (res) => {
      console.log('Upload complete:', res);
    },
    onUploadError: (error) => {
      console.error('Upload error:', error);
    },
  });

  const handleUpload = async (files: File[]) => {
    await startUpload(files);
  };

  return (
    <div>
      <input
        type="file"
        multiple
        onChange={(e) => handleUpload(Array.from(e.target.files || []))}
        disabled={isUploading}
      />
    </div>
  );
}
`

### UploadButton Component

`	sx
import { UploadButton } from '@bubblystorage/react';

function MyComponent() {
  return (
    <UploadButton
      endpoint="my-endpoint"
      onClientUploadComplete={(res) => {
        console.log('Upload complete:', res);
      }}
      onUploadError={(error) => {
        console.error('Upload error:', error);
      }}
    >
      Upload Files
    </UploadButton>
  );
}
`

### UploadDropzone Component

`	sx
import { UploadDropzone } from '@bubblystorage/react';

function MyComponent() {
  return (
    <UploadDropzone
      endpoint="my-endpoint"
      onClientUploadComplete={(res) => {
        console.log('Upload complete:', res);
      }}
      onUploadError={(error) => {
        console.error('Upload error:', error);
      }}
    />
  );
}
`

## API Reference

### useBubblyStorage

```tsx
const { startUpload, isUploading, routeConfig } = useBubblyStorage(endpoint, options);

Parameters

• endpoint: string - The upload endpoint
• options: UseBubblyStorageProps - Configuration options

Returns

• startUpload: (files: File[], input?: any) => Promise<UploadFileResult[]>
• isUploading: boolean
• routeConfig: Route config object

UploadButton

A styled button component for file uploads.

Props

• endpoint: string - The upload endpoint
• onUploadBegin?: callback when upload starts
• onUploadProgress?: callback for progress updates
• onClientUploadComplete?: callback when upload completes
• onUploadError?: callback when upload fails
• children?: custom button content
• className?: additional CSS classes
• disabled?: whether the button is disabled
• multiple?: allow multiple file selection
• ccept?: accepted file types

UploadDropzone

A drag-and-drop zone for file uploads.

Props

• endpoint: string - The upload endpoint
• onUploadBegin?: callback when upload starts
• onUploadProgress?: callback for progress updates
• onClientUploadComplete?: callback when upload completes
• onUploadError?: callback when upload fails
• children?: custom dropzone content
• className?: additional CSS classes
• disabled?: whether the dropzone is disabled
• multiple?: allow multiple file selection
• ccept?: accepted file types
• maxSize?: maximum file size in bytes
• minSize?: minimum file size in bytes

License

MIT