Composants du Kit de ressources Microsoft Graph React

  • Article

Les composants du Kit de ressources Microsoft Graph React () permettentmgt-react aux développeurs React d’utiliser le Kit de ressources Microsoft Graph dans leurs applications React. La bibliothèque encapsule tous les composants du Kit de ressources Microsoft Graph et les exporte en tant que composants React. Nous fournissons également une autre bibliothèque React (mgt-chat) pour activer les scénarios de conversation qui ne sont pas encore disponibles en tant que composants web standard.

Quels composants puis-je utiliser ?

La mgt-react bibliothèque est générée automatiquement à partir des composants web du Kit de ressources Microsoft Graph et tous les composants sont disponibles en tant que composants React.

Les noms des composants React sont en PascalCase et n’incluent pas le Mgt préfixe. Par exemple, le mgt-person composant est disponible en tant que Person, et le mgt-people-picker composant est disponible en tant que PeoplePicker.

En plus des composants générés automatiquement, les mgt-chat composants et mgt-new-chat sont fournis dans le cadre d’un package distinct (mgt-chat).

Installation

Pour installer, utilisez la commande suivante :

npm install @microsoft/mgt-react

Pour ajouter mgt-chat à votre application, utilisez la commande suivante :

npm install @microsoft/mgt-chat

Utilisation

Tous les composants sont disponibles via leur package npm et sont nommés à l’aide de PascalCase. Pour utiliser un composant, commencez par l’importer en haut.

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

Si vous utilisez mgt-chat, importez les composants séparément :

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

Vous pouvez désormais utiliser l’un de nos composants n’importe où dans votre JSX en tant que composant React standard.

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

// Using the Chat component
<Chat chatId="19:25fdc88d202440b78e9229773cbb1713@thread.v2" />

Toutes les propriétés et tous les événements sont mappés exactement comme ils sont définis dans la documentation du composant.

Par exemple, vous pouvez définir la propriété sur personDetails un objet :

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

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

Vous pouvez également inscrire un gestionnaire d’événements :

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>;
};

Modèles

La plupart des composants du Kit de ressources Microsoft Graph prennent en charge la création de modèles et mgt-react vous permettent d’utiliser React pour écrire des modèles. Les composants de conversation (mgt-chat) ne prennent pas en charge la création de modèles personnalisés.

Par exemple, pour créer un modèle à utiliser pour le rendu des événements dans le mgt-agenda composant, définissez d’abord un composant à utiliser pour le rendu d’un événement :

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>
  );
};

Ensuite, utilisez-le comme enfant du composant encapsulé et définissez les propriétés du modèle sur event.

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

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

La template propriété vous permet de spécifier le modèle à remplacer. Dans ce cas, le MyEvent composant est répété pour chaque événement et l’objet event est passé dans le dataContext cadre des propriétés.

Crochets de React personnalisés

mgt-reactfournit des hooks de React personnalisés que vous pouvez utiliser dans votre application pour suivre l’état de votre application.

useIsSignedIn

Le useIsSignedIn hook utilise le hook React useState pour suivre l’état de connexion au sein de votre composant. React restitue votre composant en réponse à toute modification de cet état. Il utilise également le useEffect hook qui améliore le cycle de vie du composant en surveillant les modifications dans le fournisseur du kit de ressources Microsoft Graph et en mettant à jour le composant en fonction des besoins.

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

const [isSignedIn] = useIsSignedIn();

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

Contenu connexe