Show and search users from your organisation, through Microsoft Graph. Search results show as a nice People Card, and display the Live Persona Card on hover.
The web part can be configured with a static search query, show a search box or accept a search query through a Dynamic Data connection to further filter the displayed results. Dynamic data can by default come from the Microsoft Search search box or the Page Environment. You could also use the Search Box Web Part provided by the PnP Modern Search Web Parts.

As a code sample this clarifies the following concepts:

• Connecting to Microsoft Graph using a SharePoint Framework web part
• Implement efficient paging through large collections in Microsoft Graph
• Use of $select, $filter, $orderby, $count and $search query parameters for Microsoft Graph
• Implement batch requests to Microsoft Graph for fetching multiple resources in one network request

I wrote a blog post covering more if the inner workings, you can find it at SPFx People Search web part based on Microsoft Graph.
Additionally, this web part has also been demoed on the PnP Community call of September 10th, 2020.

• SharePoint Online
• Microsoft Teams - Untested!!
• Office 365 tenant

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Either download the latest release OR build it yourself:

• Clone this repository
• in the command line run:
  • npm install
  • gulp build
  • gulp bundle --ship
  • gulp package-solution --ship

Install the package:

• Add to AppCatalog and deploy
• Assign 'User.Read.All' delegated permissions to the 'SharePoint Online Client Extensibility Web Application Principal', with CLI for Microsoft 365 or PnP PowerShell

m365 login
m365 spo serviceprincipal grant add --resource 'Microsoft Graph' --scope 'User.Read.All'

Grant-PnPTenantServicePrincipalPermission -Scope "User.Read.All" -Resource "Microsoft Graph"

There are many web parts that aim to do the same thing, but they either use SharePoint Search as data store or they render their results in a completely different way. It's impossible to acknowledge all sources of inspiration to this solution, but I do want to give a shout out to two projects (and their contributors) that were foundational to deliver this solution as quickly as I did:

The foundation on which I started building my own solution. This web part can be downloaded from the SharePoint Framework Client-Side Web Part Samples & Tutorial Materials

• João Mendes (@joaojmendes)
• Peter Paul Kirschner (@petkir_at)

These web parts were an enormous inspiration on code structure and implementation approach. Their codebase is very impressive, and a lot of the code in this web part is a literal copy paste from them. You can find more on the PnP Modern Search Web Parts page.

• Franck Cornu (aequos) - @FranckCornu - GitHub Sponsor Page
• Mikael Svenson (Microsoft) - @mikaelsvenson
• Yannick Reekmans - @yannickreekmans
• Albert-Jan Schot - @appieschot
• Tarald Gåsbakk (PuzzlePart) - @taraldgasbakk
• Brad Schlintz (Microsoft) - @bschlintz
• Richard Gigan - @PooLP