SharePoint  

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.

Membership not found