@storage4everyone/react

Pre-built, enterprise-grade React UI components and hooks for Storage4Everyone Cloud Object Storage.

⚡ Prerequisites

To use @storage4everyone/react, you must install the core SDK (@storage4everyone/sdk):

npm install @storage4everyone/sdk @storage4everyone/react
# or
pnpm add @storage4everyone/sdk @storage4everyone/react
# or
yarn add @storage4everyone/sdk @storage4everyone/react

🚀 Quickstart

1. Import Styles

Import the component stylesheet in your root entrypoint (e.g. main.tsx, App.tsx, or globals.css):

import '@storage4everyone/react/styles.css';

2. Wrap with <Storage4EveryoneProvider />

import React from 'react';
import { Storage4EveryoneProvider } from '@storage4everyone/react';

export function App() {
  return (
    <Storage4EveryoneProvider
      apiKey={process.env.NEXT_PUBLIC_S4E_API_KEY}
      bucket="s4e://workspace-01/test-bucket"
    >
      <MyStorageApp />
    </Storage4EveryoneProvider>
  );
}

🧩 Pre-Built Components

1. <S4EDropzone />

Dropzone and file uploader supporting drag-and-drop, multi-file queue, real-time progress bars, and file validations.

import { S4EDropzone } from '@storage4everyone/react';

<S4EDropzone
  multiple={true}
  maxSizeMB={100}
  accept="image/*,.pdf,.zip"
  onFileSuccess={(res) => console.log('File uploaded:', res.fileName)}
/>

2. <S4EFileBrowser />

Audited table listing files with live search filtering, preview modal, instant download, and enterprise delete confirmation dialog.

import { S4EFileBrowser } from '@storage4everyone/react';

<S4EFileBrowser
  title="Workspace Documents"
  onSelectFile={(file) => console.log('Selected:', file.name)}
/>

3. <S4EDownloadButton />

Single-click download button with loading indicator and secure presigned URL generation.

import { S4EDownloadButton } from '@storage4everyone/react';

<S4EDownloadButton filename="reports/invoice.pdf" label="Download PDF" />

4. <S4EBucketSelector />

Dropdown component to switch active target buckets dynamically across all components.

import { S4EBucketSelector } from '@storage4everyone/react';

<S4EBucketSelector buckets={['s4e://team/docs', 's4e://team/avatars']} />

🪝 Custom Hooks

useS4EUpload

import { useS4EUpload } from '@storage4everyone/react';

function CustomUploader() {
  const { upload, isUploading, progress } = useS4EUpload();

  const handleFile = async (e) => {
    const file = e.target.files[0];
    await upload(file);
  };

  return (
    <div>
      <input type="file" onChange={handleFile} />
      {isUploading && <p>Uploading: {progress}%</p>}
    </div>
  );
}

useS4EList

import { useS4EList } from '@storage4everyone/react';

function FileCountBadge() {
  const { count, totalBytes, isLoading, refetch } = useS4EList();

  if (isLoading) return <span>Loading...</span>;
  return <span>{count} files stored ({totalBytes} bytes)</span>;
}

🚀 Publishing to npmjs.com

1. In SDK/storage4everyone-react:

   npm install
   npm run build

2. Publish with public access:

   npm publish --access public

📄 License

Apache-2.0 © Storage4Everyone