msteams-react-base-component
v4.0.1
Published
React helper components for Microsoft 365 Teams, Office and Outlook apps
Downloads
6,496
Maintainers
Readme
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>
);
};
License
Copyright (c) Wictor Wilén. All rights reserved.
Licensed under the MIT license.