Package Exports

@bubblystorage/react
@bubblystorage/react/dist/index.js
@bubblystorage/react/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@bubblystorage/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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