File types TypeScript helper for React
v1.0.0Added in 1.0.0
File type helpers for React that tell what a file is from its name or mime type: kind, icon, tile colors, a type label and a localized size.
Type any file name (or pick a sample) and see the kind, icon tile, type label and size the helpers produce. Switch the locale to compare "2.4 MB" with "2,4 MB".
File types is a Pro React helper in the React hooks and utilities category, written in TypeScript for React 19. It installs as source with npx wingo-ui@latest add file-types, together with Number format and Tones and the npm package lucide-react.
Add to a project
Requirements: React 19, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup
npx wingo-ui@latest add file-typesFile types is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans
Usage
Import getFileKind from @/lib/file-types.
import { FILE_KIND_CLASSES, FILE_KIND_ICONS, formatFileSize, getFileKind } from "@/lib/file-types"
export function Attachment({ name, size }: { name: string; size: number }) {
const kind = getFileKind(name)
const Icon = FILE_KIND_ICONS[kind]
return (
<div className="flex items-center gap-3">
<span className={`flex size-10 items-center justify-center rounded-[12px] ${FILE_KIND_CLASSES[kind]}`}>
<Icon className="size-5" />
</span>
<span>{name}</span>
<span>{formatFileSize(size, "en-US")}</span>
</div>
)
}API
namedefault""stringThe demo's file name. The extension wins over the mime type because browsers often report none.
localedefault"en-US"stringThe locale formatFileSize uses in the demo.
getFileKind(file: { name?: string; type?: string } | string) => FileKindThe main helper: image, video, audio, pdf, document, spreadsheet, presentation, archive, code, design or other. Reads the extension first (browsers often report no mime type), then the mime type. Accepts a File, an UploadFile, any { name, type } or a plain name or URL.
Parts
formatFileSize
functionA size in the locale: "2.4 MB" in en-US ("2,4 MB" in de-DE), "320 KB". Binary steps, one decimal below 10 from MB up, and "" for missing or invalid sizes.
bytes*number | null | undefinedThe size in bytes.
localestringIntl locale for the number; the browser's when left out.
returnsstringThe formatted size, or an empty string.
getFileTypeLabel
functionA short type badge: "PDF", "XLSX"; the mime subtype when there is no extension; "" when neither says anything.
getFileExtension
functionThe lowercase extension without the dot: "pdf" for "Invoice 2026-0412.PDF". Ignores query strings and returns "" for names like ".env".
splitFileName
functionSplits "Q3 proposal.pdf" into ["Q3 proposal", ".pdf"], so a long name can truncate in the middle and still show its extension.
isPreviewableImage
functionWhether a browser can draw the file as an image thumbnail. HEIC and TIFF return false, so they get an icon tile instead.
FILE_KIND_ICONS
constantThe lucide icon for each kind: FileImage, FileText, FileSpreadsheet, Presentation, FileArchive and the rest.
FILE_KIND_CLASSES
constantTile classes for each kind: red PDF, blue document, green spreadsheet, amber slides and archives, neutral media. The same colors file-upload uses.
FILE_KIND_TONES
constantThe tone for each kind, for a Badge or any component that takes tone: danger for PDF, info for documents, success for spreadsheets.
FILE_KIND_LABELS
constantEnglish names for screen readers and captions ("PDF document", "Spreadsheet"). Pass your own map for other languages.
FileKind
typeThe kind union getFileKind returns.
FileLike
typeWhat the helpers accept: a file name or URL, or any { name?, type? } like a File.
Examples
Every kind
The icon tile, label and kind getFileKind gives each family of files.
Thumbnail or icon
isPreviewableImage keeps HEIC and TIFF on an icon tile; the lease has no extension, so its mime type decides.
Long names
splitFileName truncates the base and keeps the extension visible in a narrow column.
Sizes by locale
formatFileSize in binary steps, with one decimal below 10 from MB up.
Dependencies
Files
- lib/file-types.ts
FAQ
Is the File types helper free?
The preview, props and docs are free; copying the source needs a Pro plan. See plans.
How do I install File types?
Run npx wingo-ui@latest add file-types. It also adds the Wingo UI items it builds on (Number format and Tones) and the npm package lucide-react. With shadcn, add the @wingo-ui registry with your API key, then run npx shadcn@latest add @wingo-ui/file-types.