What is the difference between Fluent UI People Picker and Pnp Spfx React PeoplePicker

Question

I am using PnP SPFx React PeoplePicker in one of my SPFx web part, it works fine. But later I found out that MS Fluent UI also have a PeoplePicker. Going through the docs it seems a little bit different than PnP PeoplePicker by looking at the implementation.

I just want to know if there are some major differences or if one is having advantage over other so I can consider in my future work and suggest to my team.

Answer 1

I can think of below advantages of using PnP SPFx PeoplePicker control:

1. You can limit the people results to specific SharePoint group just by passing the group name as a property to PeoplePicker control like:

   <PeoplePicker
      groupName={"Team Site Owners"} // Leave this blank in case you want to filter from all users
   
      context={this.props.context}
      titleText="People Picker"
      required={true}
      onChange={this._getPeoplePickerItems}
      principalTypes={[PrincipalType.User]}
   />
   

2. You can define which type of data you want to retrieve: User, SharePoint groups, Security groups just by passing values in principalTypes (Multiple are possible).

3. PnP SPFx PeoplePicker provides out of the box required validation (Not sure if it is available in Fluent UI - need to check)

It's always better to look at the configuration options provided by the control & match them with your requirements while deciding which one to use in your solution.