Search

<DocumentExplorer data={documents} search />

That gives you a debounced search box that filters the current folder.

Searching the whole tree

<DocumentExplorer
  data={documents}
  search={{ scope: 'global' }}
/>

In global scope the breadcrumb is replaced by a "Search results for …" indicator, because the results come from folders other than the one you are standing in.

Searching metadata

By default only the name is matched. Add any dot paths you want included:

<DocumentExplorer
  search={{
    scope: 'global',
    searchableFields: ['metadata.owner', 'metadata.department'],
    placeholder: 'Search all documents',
  }}
/>

Matching

Matching is case-insensitive and diacritic-insensitive, so resume finds Résumé.pdf. Switch to prefix matching if you prefer:

<DocumentExplorer search={{ matchMode: 'startsWith' }} />

Controlling it yourself

onSearch fires with each committed query. To drive the query from your own input, use the store directly — see the core API.

<DocumentExplorer search onSearch={(query) => track('search', query)} />

Debouncing lives in the UI layer, not in the engine, so tests of the engine never wait on a timer.