File Explorer Basic - Customization

Learn how to customize the File Explorer Basic component.

Basics

Custom icons

Use the collapseIcon slot, the expandIcon slot and the defaultEndIcon prop to customize the File Explorer icons. The demo below shows how to add icons using both an existing icon library, such as Material Icons, and creating an icon from scratch using Material UI's SVG Icon component.

Notes
Images
Movies
Data

Custom toggle animations

Use the groupTransition slot on the FileElement to pass a component that handles your animation.

The demo below is animated using Material UI's Collapse component together with the react-spring library.

Notes
Images
Movies
Data

Custom styling

Use fileElementClasses to target internal elements of the Tree Item component and change their styles.

Notes
Images
Movies
Data

<FileExplorerBasic defaultExpandedItems={['grid']}>
  <CustomTreeItem name={"Notes"}>
    <CustomTreeItem name="doc.pdf" />
    <CustomTreeItem name="notes.txt" />
  </CustomTreeItem>
  <CustomTreeItem name={"Images"}>
    <CustomTreeItem name={"logo.png"} />
    <CustomTreeItem name={"favicon.ico"} />
  </CustomTreeItem>
  <CustomTreeItem name={"Movies"}>
    <CustomTreeItem name={"feature.mp4"} />
  </CustomTreeItem>
  <CustomTreeItem name={"Data"}>
    <CustomTreeItem name={"client-data.xls"} />
  </CustomTreeItem>
</FileExplorerBasic>

<FileExplorerBasic defaultExpandedItems={['grid']}>
  <CustomTreeItem name={"Notes"}>
    <CustomTreeItem name="doc.pdf" />
    <CustomTreeItem name="notes.txt" />
  </CustomTreeItem>
  <CustomTreeItem name={"Images"}>
    <CustomTreeItem name={"logo.png"} />
    <CustomTreeItem name={"favicon.ico"} />
  </CustomTreeItem>
  <CustomTreeItem name={"Movies"}>
    <CustomTreeItem name={"feature.mp4"} />
  </CustomTreeItem>
  <CustomTreeItem name={"Data"}>
    <CustomTreeItem name={"client-data.xls"} />
  </CustomTreeItem>
</FileExplorerBasic>

Press Enter to start editing

Custom label

Use the label slot to customize the Tree Item label or to replace it with a custom component.

The slotProps prop allows you to pass props to the label component. The demo below shows how to pass an id attribute to the Tree Item label:

Data Grid
Date and Time Pickers
Charts
File Explorer

The slots prop allows you to replace the default label with your own component: The demo below shows how to add a tooltip on the Tree Item label:

Data Grid
Date and Time Pickers
Charts
File Explorer

Headless API

Use the useFile hook to create your own component. The demo below shows how to add an avatar and custom typography elements.

A
Amelia Hart
B
Bailey Monroe

Common examples

Connection border

Target the fileElementClasses.groupTransition class to add connection borders between the File Explorer items.

Main

Gmail clone

Google's Gmail side nav is potentially one of the web's most famous file explorer components. The demo below shows how to replicate it.

The Gmail sidebar is one of the most well known examples of a tree view. The demo below shows how to recreate it with the File Explorer component:

All Mail
Trash
Categories
History

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.