ViewModeProvider

ViewModeProvider holds the current view mode ("list" or "grid") and makes it available to FileList and FileListToolbar.ViewToggle. Wrap your upload UI in it when you want view switching, it’s optional if you’re using FileList in a fixed mode.

4 files added

sample-video.mp4

×

50.0 MB

sample-video.mp4

50.0 MBProcessing...

sample-video.mp4

50.0 MB

sample-video.mp4

×

50.0 MB

Upload failed. Check your connection.

import { ViewModeProvider } from "@hyperserve/upload-react";
import { UploadProvider } from "@hyperserve/upload";

function App() {
  return (
    <UploadProvider config={config}>
      <ViewModeProvider>
        <FileListToolbar />
        <FileList />
      </ViewModeProvider>
    </UploadProvider>
  );
}

ViewModeProvider must be a descendant of UploadProvider. On web, it also wraps its children in a flex column layout with a 1rem gap, useful for the standard vertical stack layout.

Props

Prop	Type	Default	Description
children	ReactNode	required
defaultMode	"list" | "grid"	"list"	Initial view mode
style	CSSProperties	none	Styles for the layout wrapper. Web only. See React Native.
className	string	none	Class for the layout wrapper. Web only. See React Native.

useViewMode

Access and update view mode from any component inside a ViewModeProvider:

Switch to list

sample-video.mp4

×

50.0 MB

sample-video.mp4

50.0 MBProcessing...

sample-video.mp4

50.0 MB

sample-video.mp4

×

50.0 MB

Upload failed. Check your connection.

import { useViewMode } from "@hyperserve/upload-react";

function MyViewToggle() {
  const { viewMode, setViewMode } = useViewMode();
  return (
    <button onClick={() => setViewMode(viewMode === "list" ? "grid" : "list")}>
      {viewMode === "list" ? "Switch to grid" : "Switch to list"}
    </button>
  );
}

useViewMode returns { viewMode: "list", setViewMode: () => {} } as a safe fallback outside a provider, so components using it don’t throw.

React Native

On React Native, ViewModeProvider is a pure context provider; it renders no layout wrapper. This is intentional: React Native views already default to flexDirection: "column", so children stack vertically without any wrapping element. Because there’s no wrapper, there’s nothing to apply style or className to. To style the container, wrap ViewModeProvider in your own <View>.

import { ViewModeProvider } from "@hyperserve/upload-react-native";

<View style={{ gap: 12 }}>
  <ViewModeProvider>
    <FileListToolbar />
    <FileList />
  </ViewModeProvider>
</View>