PnP People Picker in the SharePoint Framework (SPFx) webpart

This article explains how to implement the PnP People Picker in the SharePoint Framework (SPFx) web part.
The People Picker allows users to select one or more users from a SharePoint group or site. It supports multiple selection, tooltips, and default pre-selected users.

📦 Install dependencies

Install the PnP React Controls and PnP JS libraries:

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

🧩 Configure the component

Add the state interface for the People Picker:

export interface ISpfxPnpPeoplepickerState {
  SuccessMessage: string;
  UserDetails: IUserDetail[];
  selectedusers: string[];
}

💻 Implementation

Add the following render function to display the People Picker control:

public render(): React.ReactElement<ISpfxPnpPeoplepickerProps> {
  return (
    <div className={styles.spfxPnpPeoplepicker}>
      <PeoplePicker
        context={this.props.context}
        titleText="People Picker"
        personSelectionLimit={3}
        showtooltip={true}
        isRequired={true}
        selectedItems={this._getPeoplePickerItems}
        showHiddenInUI={false}
        principalTypes={[PrincipalType.User]}
        defaultSelectedUsers={this.state.selectedusers}
        resolveDelay={1000} />
      <br></br>
      <button className={styles.button} onClick={this._updateListItem}>Save</button>
      <br></br>
      <br></br>
      <label className={styles.label}>{this.state.SuccessMessage}</label>
    </div>
  );
}

Handle People Picker selection:

@autobind
private _getPeoplePickerItems(items: any[]) {
  let userarr: IUserDetail[] = [];
  items.forEach(user => {
    userarr.push({ ID: user.id, LoginName: user.loginName });
  })
  this.setState({ UserDetails: userarr })
}

Initialize your web part class:

export default class SpfxPnpPeoplepicker extends React.Component<ISpfxPnpPeoplepickerProps, ISpfxPnpPeoplepickerState> {
  constructor(props: ISpfxPnpPeoplepickerProps, state: ISpfxPnpPeoplepickerState) {
    super(props);
    sp.setup({
      spfxContext: this.props.context
    });
    this.state = { SuccessMessage: '', UserDetails: [], selectedusers: [] };
    this._getListItem();
  }
}

Fetch default selected users from SharePoint:

@autobind
private async _getListItem() {
  const item: any = await sp.web.lists.getByTitle("Teams").items.getById(1).select("Title", "Team/Name").expand("Team").get();
  let usernamearr: string[] = [];
  item.Team.forEach(user => {
    usernamearr.push(user.Name.split('|membership|')[1].toString());
  })
  this.setState({
    selectedusers: usernamearr
  });
}

Save selected users to SharePoint list:

@autobind
private async _updateListItem() {
  let userids: object[] = [];
  this.state.UserDetails.forEach(user => {
    userids.push({ key: user.LoginName });
  })
  const updatedItem = await sp.web.lists.getByTitle("Teams").items.getById(1).validateUpdateListItem(
    [{
      FieldName: "Team",
      FieldValue: JSON.stringify(userids),
    }]);
  this.setState({ SuccessMessage: 'Successfully saved' });
}

🚀 Deploy the solution

Build and package your SPFx solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog, deploy it, and then add the web part to your SharePoint page.

🧭 Summary

You’ve successfully implemented the PnP People Picker control in SPFx.
It allows selecting multiple users, preloading values, and saving them directly into SharePoint lists.

📂 GitHub Source

View full SPFx project on GitHub:PnP People Picker in the SharePoint Framework (SPFx) webpart

GitHub