Skip to content
1.x
Go to file
Code

README.md

Chonky logo
NPM package MIT license NPM downloads GitHub stars Chat on Discord

Introduction

Chonky is constantly changing. Please create an issue if you have a problem or want to request a feature.

Chonky is a file browser component for React. It tries to recreate the native file browsing experience in your browser. This means your users can make selections, drag & drop files, toggle between List and Grid file views, use keyboard shortcuts, and much more!

Click here for documentation and examples.


Features

  • Backend-agnostic - files can come from any source (remote server, S3, virtual FS).
  • Supports file sorting.
  • Supports text search.
  • Supports drag & drop.
  • Mobile-friendly design.
  • Supports image thumbnails.
  • Supports keyboard shortcuts.
  • Supports List and Grid file views.
  • Supports common and custom file actions.
  • Provides unique icons for each file extension.
  • Supports file selections (excluding drag selection, for now).
  • Supports loading animations and async thumbnail generation.
  • Performs well with large file collections thanks to virtualization.

Quick usage

Add Chonky to your project:

npm install chonky

Use it in your React app:

import 'chonky/style/main.css';
import { FileBrowser, FileList, FileSearch, FileToolbar } from 'chonky';

export const ChonkyDemo = () => {
    const folderChain = React.useMemo(
        () => [
            { id: 'xXre', name: 'My Documents' },
            { id: 'BtrE', name: 'Websites' },
        ],
        []
    );

    const files = React.useMemo(
        () => [
            { id: '1eBr', name: 'index.html' },
            { id: 'xmFe', name: 'styles.css' },
            { id: 'vEgS', name: 'scripts.js' },
            { id: 'BVwA', name: 'favicon.ico' },
            { id: 'VsdE', name: 'robots.txt' },
        ],
        []
    );

    return (
        <FileBrowser files={files} folderChain={folderChain}>
            <FileToolbar />
            <FileSearch />
            <FileList />
        </FileBrowser>
    );
};

Preview

Chonky preview

License

MIT © Tim Kuzhagaliyev 2020

You can’t perform that action at this time.