Msteams-react-base-component NPM

Microsoft Teams UI Controls base component

This is a set of React hooks and providers based on the Microsoft Teams JavaScript SDK, the Fluent UI components and Microsoft Graph Toolkit, which is used when generating Microsoft Teams Apps using the Microsoft Teams Yeoman Generator.

@master	@preview

Usage

`useTeams` hook

To use this package in a Teams tab or extension import the useTeams Hook and then call it inside a functional component.

const [{inTeams}] = useTeams();

The useTeams hook will return a tuple of where an object of properties are in the first field and an object of methods in the second.

NOTE: using the hook will automatically initialize the Microsoft Teams JS SDK is available.

useTeams Hook arguments

The useTeams hook can take an optional object argument:

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`
`theme`	ThemePrepared	The Fluent UI Theme object for the current theme
`context`	`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

Example of usage:

import * as React from "react";
import { Provider, Flex, Header } from "@fluentui/react-northstar";
import { 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 (
        <Provider theme={theme}>
            <Flex fill={true}>
                <Flex.Item>
                    <Header content={message} />
                </Flex.Item>
            </Flex>
        </Provider>
    );
};