npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

msteams-react-base-component

1.1.1 • Public • Published

Microsoft Teams UI Controls base component

npm version npm MIT GitHub issues GitHub closed issues

This is a base component for Microsoft Teams React based Single Page Applications (SPA), based on the Microsoft Teams UI UI components, which is used when generating Microsoft Teams Apps using the Microsoft Teams Yeoman Generator.

@master @preview
Build Status Build Status

Usage

Example of usage:

import * as React from 'react';
import {
    TeamsComponentContext,
    ConnectedComponent,
    Panel,
    PanelBody,
    PanelHeader,
    PanelFooter,
    Surface
} from 'msteams-ui-components-react';
import { render } from 'react-dom';
import TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'
import * as microsoftTeams from '@microsoft/teams-js';
 
export interface IMyTabState extends ITeamsBaseComponentState {
    property: string;
}
 
export interface IMyTabConfigProps extends ITeamsBaseComponentProps {
}
 
export class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {
    public componentWillMount() {
        this.updateTheme(this.getQueryVariable('theme'));
        this.setState({
            fontSize: this.pageFontSize()
        });
 
        microsoftTeams.initialize();
        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);
    }
 
     public render() {
         const context = getContext({
            baseFontSize: this.state.fontSize,
            style: this.state.theme
        });
        const { rem, font } = context;
        const { sizes, weights } = font;
        const styles = {
            header: { ...sizes.title, ...weights.semibold },
            section: { ...sizes.base, marginTop: rem(1.4), marginBottom: rem(1.4) },
            footer: { ...sizes.xsmall }
        };
        return (
             <TeamsThemeContext.Provider value={context}>
                <Surface>
                    <Panel>
                        <PanelHeader>
                            <div style={styles.header}>Hello World</div>
                        </PanelHeader>
                        <PanelBody>
                            <div style={styles.section}>
                                HelMy Tab 
                            </div>
                        </PanelBody>
                        <PanelFooter>
                            <div style={styles.footer}>
                                (C) Copyright Myself
                            </div>
                        </PanelFooter>
                    </Panel>
                </Surface>
            </TeamsThemeContext.Provider>
        );
    }
}
 

License

Copyright (c) Wictor Wilén. All rights reserved.

Licensed under the MIT license.

install

npm i msteams-react-base-component

Downloadsweekly downloads

35

version

1.1.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability