The FolderExplorer control from @pnp/spfx-controls-react is useful when an SPFx web part needs to let users navigate through folders inside a SharePoint document library.

SPFx PnP React Controls — FolderExplorer Control

Official documentation: https://pnp.github.io/sp-dev-fx-controls-react/controls/FolderExplorer/

Introduction

The FolderExplorer control from @pnp/spfx-controls-react is useful when an SPFx web part needs to let users navigate through folders inside a SharePoint document library.

According to the official PnP documentation, this control lets users explore a folder structure, load subfolders by clicking folders, use breadcrumb navigation to return to previous levels, and optionally create folders in the current location. (PnP GitHub)

This is especially useful for document-management scenarios where the user needs to select a folder instead of manually typing a SharePoint path.

Install the package

npm install @pnp/spfx-controls-react --save

Component code

File:

src/webparts/folderExplorerWp/components/FolderExplorerWp.tsx

import * as React from 'react';
import { FolderExplorer, IFolder } from "@pnp/spfx-controls-react/lib/FolderExplorer";
import { IFolderExplorerWpProps } from './IFolderExplorerWpProps';
const _onFolderSelect = (folder: IFolder): void => {
  console.log('selected folder', folder);
}
const FolderExplorerWp: React.FC<IFolderExplorerWpProps> = ({ context }) => {
  return (
    <FolderExplorer
      context={context}
      rootFolder={{
        Name: 'Documents',
        ServerRelativeUrl: `/sites/dev/Shared Documents`
      }}
      defaultFolder={{
        Name: 'Documents',
        ServerRelativeUrl: `/sites/dev/Shared Documents`
      }}
      onSelect={_onFolderSelect}
      canCreateFolders={true}
    />
  );
};
export default FolderExplorerWp;

Props interface

File:

src/webparts/folderExplorerWp/components/IFolderExplorerWpProps.ts

import { WebPartContext } from '@microsoft/sp-webpart-base';
export interface IFolderExplorerWpProps {
  context: WebPartContext;
}

Web part render example

Inside your web part file, pass the SPFx context to the React component:

public render(): void {
  const element: React.ReactElement<IFolderExplorerWpProps> = React.createElement(
    FolderExplorerWp,
    {
      context: this.context
    }
  );
  ReactDom.render(element, this.domElement);
}

Code analysis

The import is the official one:

import { FolderExplorer, IFolder } from "@pnp/spfx-controls-react/lib/FolderExplorer";

FolderExplorer is the React control. IFolder is the type used by the selected folder callback.

The callback receives the selected folder:

const _onFolderSelect = (folder: IFolder): void => {
  console.log('selected folder', folder);
}

This is useful during development because you can inspect the selected folder object in the browser console.

The context property is required because the control needs the SPFx context to communicate with SharePoint:

context={context}

The rootFolder defines the lowest folder level the user can explore:

rootFolder={{
  Name: 'Documents',
  ServerRelativeUrl: `/sites/dev/Shared Documents`
}}

The defaultFolder defines the folder opened when the control loads:

defaultFolder={{
  Name: 'Documents',
  ServerRelativeUrl: `/sites/dev/Shared Documents`
}}

The canCreateFolders property enables folder creation:

canCreateFolders={true}

The official documentation notes that when folder creation is enabled, the current user must have the required permissions. (PnP GitHub)

Important note

Replace this path with your real site and library path:

/sites/dev/Shared Documents

For example, if your site is:

/sites/hr

Then your library path may be:

/sites/hr/Shared Documents

Run the project

npm install
heft start

Conclusion

The FolderExplorer control is a practical SPFx component for navigating SharePoint document library folders. It avoids hardcoded folder selection by giving the user an interactive folder browser with breadcrumb navigation, folder selection, and optional folder creation.