Default configuration

Setting defaults on FileBrowser component

If you look at the FileBrowser API reference, you will see that there are many settings you can set on the FileBrowser component :

<FileBrowser
    files={[]}
    doubleClickDelay={300}
    disableSelection={true}
    disableDefaultFileActions={true}
>
    {/* ... */}
</FileBrowser>

These settings will only affect this particular file browser instance. Additionally, if you change any of the props by passing a different value, the file browser will re-render to reflect the changes.

This is convenient if you only have one FileBrowser in your app, or if want each individual FileBrowser to have its own settings.

Setting global defaults

If you want to set the global defaults for all file browsers, you can use the setChonkyDefaults helper method. It lets you define defaults for many (but not all) file browser props:

import { setChonkyDefaults } from 'chonky';
import { ChonkyIconFA } from 'chonky-icon-fontawesome';
setChonkyDefaults({
    iconComponent: ChonkyIconFA,
    disableSelection: true,
    disableDragAndDropProvider: true,
});

Note that setChonkyDefaults should be used somewhere near the root of your application, before any components are rendered. It is not recommended to call setChonkyDefaults at runtime, because existing FileBrowser instances will not re-render to reflect default config changes.

You can set global defaults for the following file browser props:

export type ChonkyConfig = Pick<
    FileBrowserProps,
    | 'fileActions'
    | 'onFileAction'
    | 'thumbnailGenerator'
    | 'doubleClickDelay'
    | 'disableSelection'
    | 'disableDefaultFileActions'
    | 'disableDragAndDrop'
    | 'disableDragAndDropProvider'
    | 'defaultSortActionId'
    | 'defaultFileViewActionId'
    | 'clearSelectionOnOutsideClick'
    | 'iconComponent'
>;