How to Use PnP SPFx List Picker in Functional Components

Overview

When developing SPFx web parts, a common requirement is to let users select a SharePoint list from the current site. The PnP SPFx List Picker control from the PnP Reusable Controls library provides a polished and powerful dropdown component that simplifies this task.

In this article, we’ll walk through how to:

Install PnP Reusable Controls
Use the List Picker in an SPFx web part
Configure its properties
Retrieve the selected list and use it

Step 1. Install PnP SPFx Reusable Controls

To begin, install the PnP Reusable React Controls library.

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

Step 2. Import the ListPicker in Your Component

In your SPFx web part's React component file (e.g., MyWebPart.tsx), import the ListPicker control.

import { ListPicker } from '@pnp/spfx-controls-react/lib/ListPicker';

Step 3. Add the ListPicker to Your Render Method

Now, render the ListPicker control with required properties.

import * as React from 'react';
import { useState } from 'react';
import { ListPicker } from '@pnp/spfx-controls-react/lib/ListPicker';
import { WebPartContext } from '@microsoft/sp-webpart-base';

interface IListPickerProps {
  context: WebPartContext;
}

const ListPickerComponent: React.FC<IListPickerProps> = ({ context }) => {
  const [selectedList, setSelectedList] = useState<string>("");

  return (
    <ListPicker
      context={context}
      label="Select a list"
      placeHolder="Select a list"
      baseTemplate={100} // 100 = Generic List
      includeHidden={false}
      orderBy="Title"
      onSelectionChanged={(listId: string) => setSelectedList(listId)}
      multiSelect={false}
    />
  );
};

export default ListPickerComponent;

Parameters Explained

Prop	Description
`context`	Required. The SPFx context from the web part.
`label`	Text label shown above the dropdown.
`placeHolder`	Placeholder text when nothing is selected.
`baseTemplate`	SharePoint list template type (e.g., 100 = Custom List, 101 = Document Library).
`includeHidden`	Whether to show hidden lists or not.
`orderBy`	Property to sort the list options.
`onSelectionChanged`	Callback triggered when a list is selected.
`multiSelect`	Enables selecting multiple lists (set `true` if needed).

✅ Use the Selected List in Your Functional Component

To store the selected list in a functional component, use the useState hook:

const [selectedList, setSelectedList] = useState<string>('');

Then update the state when a list is selected:

<ListPicker
  context={context}
  label="Select a list"
  placeHolder="Select a list"
  baseTemplate={100}
  includeHidden={false}
  orderBy="Title"
  onSelectionChanged={(listId: string) => setSelectedList(listId)}
  multiSelect={false}
/>

Now you can use the selectedList variable wherever needed — for example, to fetch list items or display the list name.

📥 Example. Fetch Items from the Selected List

import { sp } from "@pnp/sp/presets/all";

const getListItems = async () => {
  if (!selectedList) return;

  try {
    const items = await sp.web.lists.getById(selectedList).items.top(5).get();
    console.log("Fetched items:", items);
  } catch (error) {
    console.error("Error fetching items:", error);
  }
};

You can call getListItems() inside a useEffect() whenever selectedList changes:

useEffect(() => { getListItems(); }, [selectedList]);

Use Case Example

Let’s say you’re building a Custom Report Web Part where users can:

Select any list
View top 5 items from that list

The ListPicker will help users pick a list, and you can fetch items dynamically based on the selection.

Design Tips

Use loading spinners while fetching items.
Show a friendly error message if the list has no items.
Optionally, filter lists using filter prop in advanced scenarios.

Permissions Note

Ensure your web part has the right permissions defined in package-solution.json for accessing lists.

"webApiPermissionRequests": [ { "resource": "Microsoft Graph", "scope": "Sites.Read.All" } ]

Testing Checklist

Web part loads correctly
Lists are fetched and shown in dropdown.
Selection triggers correct data loading
Handles hidden/system lists gracefully

Conclusion

The PnP SPFx List Picker is a must-have control when developing configurable SPFx web parts. It saves development time, enhances UX, and seamlessly integrates with SharePoint lists.