Eventi
19 nov, 23 - 21 nov, 23
Partecipa alle sessioni online di Microsoft Ignite create per espandere le tue competenze e aiutarti a risolvere i problemi complessi di oggi.
Iscriviti subitoQuesto browser non è più supportato.
Esegui l'aggiornamento a Microsoft Edge per sfruttare i vantaggi di funzionalità più recenti, aggiornamenti della sicurezza e supporto tecnico.
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.
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
).
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
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>;
};
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.
mgt-react
provides custom React hooks that you can use in your application to track the state of your application.
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> }
}
Eventi
19 nov, 23 - 21 nov, 23
Partecipa alle sessioni online di Microsoft Ignite create per espandere le tue competenze e aiutarti a risolvere i problemi complessi di oggi.
Iscriviti subito