People Picker

This people picker components searches the user information list by default. The “Show All” option within the search results will extend the search to all principal sources.

Reference this github project for an example of using the SharePoint People Picker component.

Code Example

import * as React from "react";
import { SPPeoplePicker } from "gd-sprest-react";
import { PrimaryButton } from "office-ui-fabric-react";

class MyClass extends React.Component<null, null> {
    private _spPicker: SPPeoplePicker = null;

    // Render the component
    render() {
        return (
            <div>
                <SPPeoplePicker
                    allowGroups={false}
                    allowMultiple={false}
                    ref={picker => { this._spPicker = picker; }}
                />
                <PrimaryButton
                    text="Show User"
                    onClick={this.showUser}
                />
            </div>
        )
    }

    // Method to show the selected user
    private showUser = (ev: React.MouseEvent<HtmlButtonElement>) => {
        // Prevent postback
        ev.preventDefault();

        // Get the selected user
        let user = this._spPicker.state.personas[0];
        if(user) {
            // Display the email address
            alert(user.secondaryText);
        }
    }
}