Compartilhar via

Componentes React do Microsoft Graph Toolkit

  • Artigo

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

Quais componentes posso usar?

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

Os nomes dos componentes React estão no PascalCase e não incluem o Mgt prefixo. 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 autogenerados, os mgt-chat componentes e mgt-new-chat são entregues 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 do 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 você estiver usando mgt-chat, importe os componentes separadamente:

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

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

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

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

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

Por exemplo, você pode definir a personDetails propriedade como 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 dá suporte à templating e mgt-react permite que você use React para gravar modelos. Os componentes de chat (mgt-chat) não dão suporte à templating personalizada.

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 uma criança 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>
}

O template suporte permite especificar qual modelo substituir. Nesse caso, o MyEvent componente é repetido para cada evento e o event objeto é passado como parte das dataContext propriedades.

Ganchos de React personalizados

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

useIsSignedIn

O useIsSignedIn gancho usa o gancho React useState para rastrear o estado conectado dentro do componente. React renderiza novamente seu componente em resposta a quaisquer alterações nesse estado. Ele também usa o useEffect gancho que aprimora o ciclo de vida do componente monitorando as alterações no provedor do Kit de Ferramentas do Microsoft Graph 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