Microsoft Graph Toolkit React コンポーネント

  • [アーティクル]

Microsoft Graph Toolkit React コンポーネント (mgt-react) を使用すると、React開発者は、React アプリケーションで Microsoft Graph Toolkit を使用できます。 ライブラリは、すべての Microsoft Graph Toolkit コンポーネントをラップし、React コンポーネントとしてエクスポートします。 また、通常の Web コンポーネントとしてまだ利用できないチャット シナリオを可能にする別のReact ライブラリ (mgt-chat) も用意しています。

どのようなコンポーネントを使用できますか?

ライブラリは mgt-react Microsoft Graph Toolkit Web コンポーネントから自動生成され、すべてのコンポーネントはReact コンポーネントとして使用できます。

React コンポーネントの名前は PascalCase にあり、プレフィックスはMgt含まれません。 たとえば、 mgt-person コンポーネントは として Person使用でき、 mgt-people-picker コンポーネントは として PeoplePicker使用できます。

自動生成されたコンポーネントに加えて、 mgt-chat コンポーネントと mgt-new-chat コンポーネントは別のパッケージ (mgt-chat) の一部として配信されます。

インストール

インストールするには、次のコマンドを使用します。

npm install @microsoft/mgt-react

アプリケーションに追加 mgt-chat するには、次のコマンドを使用します。

npm install @microsoft/mgt-chat

使用方法

すべてのコンポーネントは npm パッケージを介して使用でき、PascalCase を使用して名前が付けられます。 コンポーネントを使用するには、最初にコンポーネントを上部にインポートします。

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

を使用 mgt-chatしている場合は、コンポーネントを個別にインポートします。

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

JSX 内の任意のコンポーネントを通常のReact コンポーネントとして使用できるようになりました。

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

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

すべてのプロパティとイベントは、コンポーネント ドキュメントで定義されているとおりに正確にマップされます。

たとえば、 プロパティを personDetails オブジェクトに設定できます。

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

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

または、イベント ハンドラーを登録します。

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

テンプレート

ほとんどの Microsoft Graph Toolkit コンポーネントではテンプレートがサポートされており、mgt-reactReactを使用してテンプレートを記述できます。 チャット コンポーネント (mgt-chat) では、カスタム テンプレートはサポートされていません。

たとえば、コンポーネント内のイベントのレンダリングに使用するテンプレートを mgt-agenda 作成するには、まず、イベントのレンダリングに使用するコンポーネントを定義します。

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

次に、ラップされたコンポーネントの子として使用し、テンプレートのプロパティを に event設定します。

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

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

template prop を使用すると、上書きするテンプレートを指定できます。 この場合、コンポーネントはすべてのイベントに MyEvent 対して繰り返され event 、オブジェクトはプロパティの dataContext 一部として渡されます。

カスタム React フック

mgt-reactには、アプリケーションの状態を追跡するためにアプリケーションで使用できるカスタム React フックが用意されています。

useIsSignedIn

フックはuseIsSignedIn、React useState フックを使用して、コンポーネント内のサインイン状態を追跡します。 React、この状態の変更に応じてコンポーネントを再レンダリングします。 また、 useEffect Microsoft Graph Toolkit プロバイダーの変更を監視し、必要に応じてコンポーネントを更新することで、コンポーネントのライフサイクルを強化するフックも使用します。

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

const [isSignedIn] = useIsSignedIn();

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

関連コンテンツ