Edit

Microsoft Graph Toolkit React components

  • Article
  • 2 minutes to read

The Microsoft Graph Toolkit React components (mgt-react) allow React developers to use the Microsoft Graph Toolkit in their React applications. The library wraps all Microsoft Graph Toolkit components and exports them as React components.

What components can I use?

The library is autogenerated from the Microsoft Graph Toolkit web components and all components are available as React components.

The names of the React components are in PascalCase and do not include the Mgt prefix. For example, the mgt-person component is available as Person, and the mgt-people-picker component is available as PeoplePicker.

Installation

To install, use one of the following commands.

npm install @microsoft/mgt-react

or

yarn add @microsoft/mgt-react

Usage

All components are available via the npm package and are named using PascalCase. To use a component, first import it at the top.

import { Person } from '@microsoft/mgt-react';

You can now use Person anywhere in your JSX as a regular React component.

<Person personQuery="me" />

All properties and events map exactly as they are defined in the component documentation.

For example, you can set the personDetails property to an object:

const App = (props) => {
  const personDetails = {
    displayName: 'Bill Gates',
  };

  return <Person personDetails={personDetails}></Person>;
};

Or, register an event handler:

import { PeoplePicker, People } from '@microsoft/mgt-react';

const App = (props) => {
  const [people, setPeople] = useState([]);

  const handleSelectionChanged = (e) => {
    setPeople(e.target.selectedPeople);
  };

  return
    <div>
      <PeoplePicker selectionChanged={handleSelectionChanged} />
      Selected People: <People people={people} />
    </div>;
};

Templates

Most Microsoft Graph Toolkit components support templating and mgt-react allows you to use React to write templates.

For example, to create a template to be used for rendering events in the mgt-agenda component, first define a component to be used for rendering an event:

import { MgtTemplateProps } from '@microsoft/mgt-react';

const MyEvent = (props: MgtTemplateProps) => {
  const { event } = props.dataContext;
  return <div>
    {event.subject}<br />
    {event.attendees
      .map((attendee: any) => attendee.emailAddress.name)
      .join(', ')}
  </div>;
};

Then use it as a child of the wrapped component and set the template prop to event.

import { Agenda } from '@microsoft/mgt-react';

const App = (props) => {
  return <Agenda>
    <MyEvent template="event">
  </Agenda>
}

The template prop allows you to specify which template to overwrite. In this case, the MyEvent component will be repeated for every event, and the event object will be passed as part of the dataContext prop.

See also