Setting current folder

Like any other file browser, Chonky can display the path to the current folder in the navbar above the files.

To enable this feature, you should place the <FileNavbar /> component inside of your FileBrowser. Then, you need to specify the folderChain prop on FileBrowser:

const folderChain = [
    { id: 'zxc', name: 'Home' },
    null, // Will show loading placeholder
    { id: 'fgh', name: 'My Documents' },
];
<FileBrowser files={[]} folderChain={folderChain}>
    <FileNavbar /> {/* <----- */}
    <FileToolbar />
    <FileList />
</FileBrowser>;

Folder chain follows the exact same rules as the files array from the previous section. It can also contain null values to indicate loading files, and the objects inside it should follow the FileData type. Some notes:

• The files in the folderChain array don't need to have isDir set to true.
• Clicking on an item in the folder chain will open it, unless it is null or has openable set to false.
• The "Go up a directory" button only works when the second-to-last file in the folder chain is openable.

Example folder chain

The live example below shows different possible folder chain configurations.

() => {
  const folderChain = [
    { id: 'zxc', name: 'Bucket', isDir: true },
    { id: 'dfg', name: 'Subfolder', isDir: true },
    null,
    { id: 'bfr', name: 'Home' },
    { id: 'ltr', name: 'Documents', openable: false },
    null,
    { id: 'nrg', name: 'Payslips', openable: false },
  ]
  return (
    <FileBrowser files={[]} folderChain={folderChain}>
      <FileNavbar />
      <FileToolbar />
      <FileList />
    </FileBrowser>
  )
}