@samuelncui/chonky

Chonky is a file browser component for React. It supports file selection, drag-and-drop, list and grid views, keyboard shortcuts, search, sorting, custom actions, and custom icons.

This maintained fork updates the inactive upstream project for current React applications. See the repository's fork rationale and changelog.

Requirements

• React and React DOM 19.2.x
• Node.js 22.12 or later

Installation

npm install @samuelncui/chonky @samuelncui/chonky-icon-fontawesome

Usage

import { FullFileBrowser } from '@samuelncui/chonky';
import { ChonkyIconFA } from '@samuelncui/chonky-icon-fontawesome';

export function FileBrowser() {
  return <FullFileBrowser files={[]} iconComponent={ChonkyIconFA} />;
}

FileToolbar uses the wrapping responsive layout by default. When composing the browser manually, use its inline layout to keep the filter, summary, children, and action regions on one row:

<FileToolbar layout="inline" />

Use a browser ref when an external result needs to be selected and scrolled into view:

import { useRef } from 'react';
import { FullFileBrowser, type FileBrowserHandle } from '@samuelncui/chonky';

export function RevealableBrowser() {
  const browser = useRef<FileBrowserHandle>(null);
  return (
    <>
      <button onClick={() => browser.current?.revealFile('report')}>Show report</button>
      <FullFileBrowser ref={browser} files={[{ id: 'report', name: 'Report.pdf' }]} />
    </>
  );
}

revealFile only acts when selection is enabled and the target file is both displayed and selectable. Otherwise, the current selection and viewport remain unchanged.

See the repository for the runnable example and development instructions.

License

MIT