Skip to main content

React Overview

WIP

React bindings for the upload engine.

The React layer is thin on purpose — context and subscription helpers only. Upload logic stays in the core engine.

Provider

Wrap the app with UploadProvider so components can reach the store:

import { UploadProvider } from '@gentleduck/upload/react'
 
<UploadProvider store={store}>
  <App />
</UploadProvider>
import { UploadProvider } from '@gentleduck/upload/react'
 
<UploadProvider store={store}>
  <App />
</UploadProvider>

Hooks

HookDescription
useUploader()Returns items, dispatch, and event helpers
useUploaderActions()Returns dispatch/on plus direct store access

Typical Flow

  1. Render upload lists and progress with useUploader.
  2. Add files with dispatch({ type: 'addFiles' }).
  3. Subscribe to upload.completed for results.
const { items, dispatch, on } = useUploader()
 
React.useEffect(() => {
  return on('upload.completed', ({ localId, result }) => {
    console.log(localId, result)
  })
}, [on])
const { items, dispatch, on } = useUploader()
 
React.useEffect(() => {
  return on('upload.completed', ({ localId, result }) => {
    console.log(localId, result)
  })
}, [on])

See UploadProvider and useUploader for the API.