Edit

Share via

Microsoft Graph Toolkit React components

  • Article

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. We also provide another React library (mgt-chat) to enable chat scenarios that aren't yet available as regular web components.

What components can I use?

The mgt-react 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 don't include the Mgt prefix. For example, the mgt-person component is available as Person, and the mgt-people-picker component is available as PeoplePicker.

In addition to the autogenerated components, the mgt-chat and mgt-new-chat components are delivered as part of a separate package (mgt-chat).

Installation

To install, use the following command:

npm install @microsoft/mgt-react

To add mgt-chat to your application, use the following command:

npm install @microsoft/mgt-chat

Usage

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

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

If you're using mgt-chat, import the components separately:

import { Chat } from "@microsoft/mgt-chat";

You can now use any of our components anywhere in your JSX as a regular React component.

// Using the Person component
<Person personQuery="me" />

// Using the Chat component
<Chat chatId="19:[email protected]" />

All properties and events map exactly as they're 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. The chat components (mgt-chat) don't support custom templating.

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 properties 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 is repeated for every event, and the event object is passed as part of the dataContext properties.

Custom React hooks

mgt-react provides custom React hooks that you can use in your application to track the state of your application.

useIsSignedIn

The useIsSignedIn hook uses the React useState hook to track the signed-in state within your component. React re-renders your component in response to any changes in this state. It also uses the useEffect hook which enhances the lifecycle of the component by monitoring changes in the Microsoft Graph Toolkit provider and updating the component as needed.

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

const [isSignedIn] = useIsSignedIn();

const App = (props) => {
  return { isSignedIn && <Agenda></Agenda> }
}

Related content