@microsoft/teamsfx-react package

Classes

BaseDashboard	The base component that provides basic functionality to create a dashboard.
BaseWidget	The base component that provides basic functionality to create a widget.

Interfaces

IWidgetClassNames

Interface for defining the class names of widget elements

Type Aliases

TeamsContextWithCredential

TeamsFxContext

Functions

useData<T>(() => Promise<T>, { autoLoad: boolean })	Helper function to fetch data with status and error.
useGraph<T>((graph: Client, teamsfx: TeamsFx, scope: string[]) => Promise<T>, GraphOption)	Helper function to call Microsoft Graph API with authentication.
useGraphWithCredential<T>((graph: Client, credential: TeamsUserCredential, scope: string[]) => Promise<T>, GraphOptionWithCredential)	Helper function to call Microsoft Graph API with authentication.
useTeams({ initialTheme?: string, setThemeHandler?: (theme?: string) => void })	Microsoft Teams React hook
useTeamsFx(Record<string, string>)	Initialize TeamsFx SDK with customized configuration.
useTeamsUserCredential(TeamsUserCredentialAuthConfig)	Initialize TeamsFx SDK with customized configuration.

Function Details

useData<T>(() => Promise<T>, { autoLoad: boolean })

Helper function to fetch data with status and error.

function useData<T>(fetchDataAsync: () => Promise<T>, options?: { autoLoad: boolean }): Data<T>

Parameters

fetchDataAsync

() => Promise<T>

async function of how to fetch data

options

{ autoLoad: boolean }

if autoLoad is true, reload data immediately

Returns

Data<T>

data, loading status, error and reload function

useGraph<T>((graph: Client, teamsfx: TeamsFx, scope: string[]) => Promise<T>, GraphOption)

Warning

This API is now deprecated.

Please use useGraphWithCredential instead.

Helper function to call Microsoft Graph API with authentication.

function useGraph<T>(fetchGraphDataAsync: (graph: Client, teamsfx: TeamsFx, scope: string[]) => Promise<T>, options?: GraphOption): Data<T>

Parameters

fetchGraphDataAsync

(graph: Client, teamsfx: TeamsFx, scope: string[]) => Promise<T>

async function of how to call Graph API and fetch data.

options

GraphOption

teamsfx instance and OAuth resource scope.

Returns

Data<T>

data, loading status, error and reload function

useGraphWithCredential<T>((graph: Client, credential: TeamsUserCredential, scope: string[]) => Promise<T>, GraphOptionWithCredential)

Helper function to call Microsoft Graph API with authentication.

function useGraphWithCredential<T>(fetchGraphDataAsync: (graph: Client, credential: TeamsUserCredential, scope: string[]) => Promise<T>, options?: GraphOptionWithCredential): Data<T>

Parameters

fetchGraphDataAsync

(graph: Client, credential: TeamsUserCredential, scope: string[]) => Promise<T>

async function of how to call Graph API and fetch data.

options

GraphOptionWithCredential

Authentication configuration and OAuth resource scope.

Returns

Data<T>

data, loading status, error and reload function

useTeams({ initialTheme?: string, setThemeHandler?: (theme?: string) => void })

Microsoft Teams React hook

function useTeams(options?: { initialTheme?: string, setThemeHandler?: (theme?: string) => void }): [{ context?: app.Context, fullScreen?: boolean, inTeams?: boolean, loading?: boolean, theme: Theme, themeString: string }, { setTheme: (theme: string | undefined) => void }]

Parameters

options

{ initialTheme?: string, setThemeHandler?: (theme?: string) => void }

optional options

Returns

[{ context?: app.Context, fullScreen?: boolean, inTeams?: boolean, loading?: boolean, theme: Theme, themeString: string }, { setTheme: (theme: string | undefined) => void }]

A tuple with properties and methods properties:

• inTeams: boolean = true if inside Microsoft Teams
• fullscreen: boolean = true if in full screen mode
• theme: Fluent UI Theme
• themeString: string - representation of the theme (default, dark or contrast)
• context - the Microsoft Teams JS SDK context methods:
• setTheme - manually set the theme

useTeamsFx(Record<string, string>)

Initialize TeamsFx SDK with customized configuration.

function useTeamsFx(teamsfxConfig?: Record<string, string>): TeamsFxContext

Parameters

teamsfxConfig

Record<string, string>

custom configuration to override default ones.

Returns

TeamsFxContext

TeamsFxContext object

useTeamsUserCredential(TeamsUserCredentialAuthConfig)

Initialize TeamsFx SDK with customized configuration.

function useTeamsUserCredential(authConfig: TeamsUserCredentialAuthConfig): TeamsContextWithCredential

Parameters

authConfig

TeamsUserCredentialAuthConfig

custom configuration to override default ones.

Returns

TeamsContextWithCredential

TeamsContextWithCredential object