How to use PnP PeoplePicker

Today I wan to cover the use of the PeoplePicker of the @pnp/spfx-controls-react package.

The control let’s you select users and groups filtering them by the name, also you can specify if a single or a multiple selection is enabled.

In this sample there are a PeoplePicker to select a user and another to select a group.

To enable this you need to install the package:

npm i @pnp/spfx-controls-react

In the control where you want to use the PeoplePicker import it with the following:

import {
  PeoplePicker,
  PrincipalType
} from "@pnp/spfx-controls-react/lib/PeoplePicker";

The PeoplePicker is the control to use and the PrincipalType is to specify which kind of prinipal type to support.

To use the control that allows you to select only one user:

<PeoplePicker
            context={this.props.context as any}
            titleText="People Picker for users"
            personSelectionLimit={1}
            ensureUser={true}
            principalTypes={[PrincipalType.User]}
            onChange={this._getPeoplePickerItems} />

The context to be used is of type WebPartContext and is defined in the properties of the web part and retrieved in the web part class.

If you’re interested in knowing more about this control you can check the official documentation here and if you want to check the sample I created for this post you can view it here.

Hope this helps!