FileListToolbar

FileListToolbar is a two-slot bar (left and right) for showing file count and a list/grid view toggle. Both slots are fully replaceable: pass null to hide a slot or a custom ReactNode to override the default sub-component.

3 files added

import { FileListToolbar } from "@hyperserve/video-uploader-react";

<FileListToolbar />

Props

Prop	Type	Default	Description
left	ReactNode | null	FileCount	Left slot content
right	ReactNode | null	ViewToggle	Right slot content
showFileCount	boolean	true	Show default file count in left slot
showViewToggle	boolean	true	Show default view toggle in right slot
style	CSSProperties	none	Container styles
className	string	none	Container class
styles	FileListToolbarStyles	none	Slot map applied to internal elements (see Slots below)

Sub-components

FileListToolbar.FileCount

Shows "N files added" by default. Accepts a label render prop:

4 videos

<FileListToolbar
  left={
    <FileListToolbar.FileCount
      label={(count) => `${count} video${count !== 1 ? "s" : ""}`}
    />
  }
/>

FileListToolbar.ViewToggle

List/grid toggle buttons. Requires a ViewModeProvider ancestor. Accepts a children render prop for custom toggle UI:

ListGrid

<FileListToolbar.ViewToggle>
  {({ viewMode, setViewMode }) => (
    <select
      value={viewMode}
      onChange={(e) => setViewMode(e.target.value as "list" | "grid")}
    >
      <option value="list">List</option>
      <option value="grid">Grid</option>
    </select>
  )}
</FileListToolbar.ViewToggle>

Slots

Pass a styles slot map to theme internal elements. Slots merge over defaults; local style props win over slots. See Theming for the canonical merge-order explanation.

Slot	Targets
root	The outer toolbar container
fileCount	The default FileCount text
viewToggle	The ViewToggle button group container
viewToggleButton	Each view toggle button (inactive state)
viewToggleButtonActive	Merged on top of viewToggleButton for the active button

The React Native FileListToolbar exposes the same slots plus two extras for the inner <Text> of each button. Web doesn’t need them because it uses inline icon children:

• viewToggleText
• viewToggleTextActive

<FileListToolbar
  styles={{
    root: { padding: 12, background: "#0f172a" },
    fileCount: { color: "#cbd5e1" },
    viewToggleButton: { background: "#1e293b", color: "#94a3b8" },
    viewToggleButtonActive: { background: "#38bdf8", color: "#0f172a" },
  }}
/>