Componentes do Microsoft Graph Toolkit React

Os componentes do React do Microsoft Graph Toolkit (mgt-react) permitem que os desenvolvedores do React usem o Microsoft Graph Toolkit em seus aplicativos React. A biblioteca encapsula todos os componentes do Microsoft Graph Toolkit e os exporta como componentes do React. Também fornecemos outra biblioteca do React () para habilitar cenários de chat quemgt-chat ainda não estão disponíveis como componentes da Web regulares.

Quais componentes posso usar?

A mgt-react biblioteca é gerada automaticamente a partir dos componentes da Web do Microsoft Graph Toolkit e todos os componentes estão disponíveis como componentes do React.

Os nomes dos componentes do React estão em PascalCase e não incluem o prefixoMgt. Por exemplo, o mgt-person componente está disponível como Person, e o mgt-people-picker componente está disponível como PeoplePicker.

Além dos componentes gerados automaticamente, os mgt-chat componentes e mgt-new-chat são fornecidos como parte de um pacote separado (mgt-chat).

Instalação

Para instalar, use o seguinte comando:

npm install @microsoft/mgt-react

Para adicionar mgt-chat ao seu aplicativo, use o seguinte comando:

npm install @microsoft/mgt-chat

Uso

Todos os componentes estão disponíveis por meio de seu pacote npm e são nomeados usando PascalCase. Para usar um componente, primeiro importe-o na parte superior.

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

Se estiver usando mgt-chato , importe os componentes separadamente:

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

Agora você pode usar qualquer um de nossos componentes em qualquer lugar do seu JSX como um componente regular do React.

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

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

Todas as propriedades e eventos são mapeados exatamente como estão definidos na documentação do componente.

Por exemplo, você pode definir a personDetails propriedade para um objeto:

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

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

Ou registre um manipulador de eventos:

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

Modelos

A maioria dos componentes do Microsoft Graph Toolkit oferece suporte a modelos e mgt-react permite que você use o React para escrever modelos. Os componentes de chat (mgt-chat) não dão suporte a modelos personalizados.

Por exemplo, para criar um modelo a ser usado para renderizar eventos no mgt-agenda componente, primeiro defina um componente a ser usado para renderizar um evento:

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

Em seguida, use-o como um filho do componente encapsulado e defina as propriedades do modelo como event.

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

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

A template prop permite que você especifique qual modelo substituir. Nesse caso, o MyEvent componente é repetido para cada evento e o event objeto é passado como parte das dataContext propriedades.

Ganchos personalizados do React

mgt-reactfornece ganchos personalizados do React que você pode usar em seu aplicativo para rastrear o estado de seu aplicativo.

useIsSignedIn

O useIsSignedIn gancho usa o gancho do React useState para rastrear o estado conectado dentro do componente. O React renderiza novamente seu componente em resposta a quaisquer alterações nesse estado. Ele também usa o gancho, useEffect que aprimora o ciclo de vida do componente, monitorando as alterações no provedor do Microsoft Graph Toolkit e atualizando o componente conforme necessário.

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

const [isSignedIn] = useIsSignedIn();

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

Conteúdo relacionado

• Introdução ao Microsoft Graph Toolkit no React
• Saiba mais sobre os provedores de autenticação
• Desambiguação de componentes do Microsoft Graph Toolkit