File types

Type icons and labels come from a registry, not from a chain of if (ext === 'pdf').

Built-in types

PDF · Word · Excel · PowerPoint · Image · Video · Audio · Archive · Markdown · Text · Code · Data — covering roughly a hundred extensions and the common MIME types.

An unknown extension displays as itself (thing.xyz → "XYZ") rather than a generic "File", so nothing looks broken.

Registering your own

import { registerFileType } from '@document-explorer/core';

registerFileType({
  extensions: ['rs'],
  label: 'Rust',
  iconKey: 'code',
  color: 'var(--de-type-code)',
});

registerFileType({
  mimeTypes: ['application/vnd.acme.report'],
  label: 'Report',
  iconKey: 'doc',
  previewable: true,
});

Call it once at startup, before the explorer renders.

Why iconKey is a string

iconKey names an icon; it is never a component. That is what keeps the core package free of any renderer dependency — React maps the key to a React icon, Angular maps it to an Angular one, and the engine stays DOM-free.

To use an icon the built-in sets do not have, override rendering per item:

<DocumentExplorer renderers={{ icon: (item) => <MyIcon item={item} /> }} />

Resolution order

1. An explicit mimeType on the item
2. Its extension
3. The suffix of its name
4. A generic fallback

Folders always resolve to the folder type, whatever their name suggests.