Microsoft Graph Toolkit React components
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:25fdc88d202440b78e9229773cbb1713@thread.v2" />
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
피드백
https://aka.ms/ContentUserFeedback
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요.다음에 대한 사용자 의견 제출 및 보기