@accord-coop/use-teams 中文文档教程

Question

Microsoft Teams UI Controls base component

这是一个基于 Microsoft Teams JavaScript SDK 和 Fluent UI 组件的 React hook，它在使用 Microsoft Teams Yeoman Generator 生成 Microsoft Teams 应用程序时使用。 Accord Cooperative 的这个分支排除了 Fluent UI React Northstar 依赖项。

@master	@preview

Usage

要在 Teams 选项卡或扩展中使用此包，请导入 useTeams Hook，然后在功能组件中调用它。

const [{inTeams}] = useTeams();

useTeams 挂钩将返回一个元组，其中属性对象位于第一个字段中，方法对象位于第二个字段中。

注意：如果 Microsoft Teams JS SDK 可用，使用挂钩将自动调用 microsoftTeams.initialize() 和 microsoftTeams.getContext()。

useTeams Hook arguments

useTeams 挂钩可以采用可选 对象参数：

Argument	Description
initialTheme?: string	Manually set the initial theme (default, dark or contrast)
setThemeHandler?: (theme?: string) => void	Custom handler for themes

Available properties

Property name	Type	Description
inTeams	boolean?	true if hosted in Teams and false for outside of Microsoft Teams
fullScreen	boolean?	true if the Tab is in full-screen, otherwise false
themeString	string	The value of default, dark or contrast
context	microsoftTeams.Context?	undefined while the Tab is loading or if not hosted in Teams, set to a value once the Tab is initialized and context available

Available methods

Method name	Description
setTheme(theme?: string)	Method for manually setting the theme

Full example

使用示例：

import React, { useState, useEffect } from "react";
import { useTeams } from "msteams-react-base-component";

/**
 * Implementation of the hooks Tab content page
 */
export const HooksTab = () => {
    const [{ inTeams, theme }] = useTeams({});
    const [message, setMessage] = useState("Loading...");

    useEffect(() => {
        if (inTeams === true) {
            setMessage("In Microsoft Teams!");
        } else {
            if (inTeams !== undefined) {
                setMessage("Not in Microsoft Teams");
            }
        }
    }, [inTeams]);

    return (
        <div>{message}</div>
    );
};

Additional helper methods

该包还导出两个辅助方法，均由 useTeams 挂钩在内部使用.

getQueryVariable(name: string): string - 返回由名称标识的查询字符串变量的值。

checkInTeams(): boolean - 如果托管在 Microsoft Teams 中，则返回 true。

License

版权所有 (c) Wictor Wilén。 版权所有。

根据麻省理工学院许可获得许可。