Skip to content

Navigation

Clicking a folder opens it; breadcrumbs track where you are.

tsx
<DocumentExplorer
  data={documents}
  rootLabel="All documents"
  onFolderOpen={(folder) => console.log(folder?.name ?? 'root')}
  onDocumentOpen={(item) => window.open(item.viewUrl)}
/>

onFolderOpen receives null for the root.

Click behaviour is configurable

Different products want different things from a click:

tsx
<DocumentExplorer
  interaction={{
    folderClick: 'open',   // 'open' | 'select' | 'none'
    fileClick: 'select',   // 'open' | 'select' | 'none'
    doubleClick: 'open',   // 'open' | 'none'
  }}
/>

Those are the defaults: a folder opens on a single click, a file selects, and a double click opens either.

Modifier clicks always mean selection when selection is enabled — Shift+click extends a range, Ctrl/Cmd+click toggles one row — regardless of the interaction settings.

Keyboard

Backspace goes up a folder. See Accessibility for the full keyboard contract.

Searching clears on navigation

Moving to a different folder clears the query. A stale filter silently applied in a new folder is the single most confusing thing a file browser can do.

Released under the MIT License.