{"_id":"msteams-react-base-component","_rev":"61-ea0643e141a54bfc5808efc9daa58d1b","name":"msteams-react-base-component","dist-tags":{"latest":"4.0.1","preview":"4.0.1-preview"},"versions":{"0.0.3":{"name":"msteams-react-base-component","version":"0.0.3","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run build","build":"tsc -p .","clean":"rm -rf lib"},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"typescript":"^2.9.2"},"dependencies":{"@microsoft/teams-js":"^1.2.6","@types/react":"^16.4.7","@types/react-dom":"^16.0.6","msteams-ui-components-react":"^0.7.3","react":"^16.4.1","react-dom":"^16.4.1","typestyle":"^1.7.2"},"gitHead":"407919b073016923dce78416a72a0320a584827f","_id":"msteams-react-base-component@0.0.3","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"dist":{"integrity":"sha512-BuM6Hc9LvInkLnW9kYiq52RJOnjX03czghRreHAsABI7gHzKh6ZiENFVFIx0bnrVf9VpDel/eMIgxFDRUjUtUA==","shasum":"7b9c344e79b5fab079771817e546a8d086620ab3","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-0.0.3.tgz","fileCount":6,"unpackedSize":11653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbXPQfCRA9TVsSAnZWagAAgWEP+wXjVKLcc1Q7GgEbEbAV\nX9CHF9tYRM/hMYrokAUF1u/HjZqlnsa2Fyn2lazWwIcihdybe5tW4B8nxWK/\n6LQb1zf1h/7S/E575xGuW0s5oIDyQorEUVkHFIsr2dGUKIH5ywHxVPHOR3hb\nYR0iPIWJhNWj+lRBbnC7vL6VNZzRlXQA5F7eECQa8yw4BIVnzXTBqmfBKz4G\nhEB24Yu1lw8+BDf7zz3NREFEaWt7DI+SUkWsgChHSf8+N0zI1wpyyxSEry2G\nPxVhllbdnmZrLos7fHc8o9ZCBYUTqeD0pOFyuIG6Au+Lcf7Wu6wohm95gjhK\nqkQENeZ1vRF0rls6u/p4uX7beQCzTOrcBZN8vydXSyjX3qdCr8TEFVc9fMpe\nOy5sLrVwBnqynbAXRO8/8Q+KdlZBZsJObk3l+FhCmR5DAWrYGHj6eeiE2d8r\nJl5AufCXCR0OTcZkFONY4jp7PzeXMR42ZNH6Bt7oACw4GIL4SQ9WLroKa8/q\nSMr0SLtQWOs5LYj1OGvNHTch5TCIPqGd9kOAgDd7Bw4lIqUuc8TpEP25CRcn\nw6cg68BpmJzgUXAxOtx8RrzPrkTJ1pfX0LseCTwUnC0jq9P9p07AyeLI6OnX\nOEmvkALqSn3+UMnKoHsFoTdNMqUWDDaosI0YfWZcELFOTZ8PevZ/nCMVpevB\nNi60\r\n=DseM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCh8zMe5HFjZNZYOCqZMf6ezeIctQzNmWeVd+HVsmxeKwIgLLpGqAdyxKbN1ab0DgUzXzD5K7CN8UaaYCXwrwPlhyo="}]},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_0.0.3_1532818462911_0.41555549398110103"},"_hasShrinkwrap":false},"0.0.4":{"name":"msteams-react-base-component","version":"0.0.4","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"tslint --project ."},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"tslint":"^5.11.0","typescript":"^2.9.2"},"dependencies":{"@microsoft/teams-js":"^1.2.6","@types/react":"^16.4.7","@types/react-dom":"^16.0.6","msteams-ui-components-react":"^0.7.3","react":"^16.4.1","react-dom":"^16.4.1","typestyle":"^1.7.2"},"gitHead":"fac11360c72a9253d164868195356f1cdd62d7bb","_id":"msteams-react-base-component@0.0.4","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"dist":{"integrity":"sha512-B1FSfkQgK5hrwOu2SvTPkgQ+UiPdFCuAwj4ffMoNqy2yyWeblqzXgV/oZJNssy8M6WU6bg0CWXztNUmjHpEroA==","shasum":"bceb2f19be15a41b48f1d18770f5b80c1d5ef8dd","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-0.0.4.tgz","fileCount":6,"unpackedSize":12654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX38mCRA9TVsSAnZWagAA7hQP/jc2h/wMqapDg0s8MLyo\nwPQpPZ5y8vcDtBaGWgnYvzikQRJTLkDG132SFUT3Mhad+AS/opsG6cCB13O0\nfKQ0478RwY0wlW+9Pk5lFnRCa5X0iOue2XCAA9s4iPdA8ejLThqvO0igoExJ\njgWV4VR7Tc9Jm26q3zm2v2wDDiRV5t6cj5wX5qlDyU0WF1PoiMzXpzFz8oOD\nG7qG/Cch0pY+NC8QcUVbFL/MOX3Wxy5jzktu9fmfn83voU64kgB92c+k5rqu\n4CzhOYXjBNCEnvCNpczefV1sZeMAZNyG4sOyi+Df2ya3i3mncMWkinunKkZ9\n0XMaG4jVKH6ZIEHdm4m9dCOANrOkAwZ/rQS2kny5T9W8BHLO+fZMcO3Lg3zW\nLWDKhgl6wsrwr9xPu3masKlCOKE9kRKhl3SNXPsoEGgC/nz0MPoh2rT5kvD7\nJBmmawVrgwdJMGFMmosz5eRiQuV+MKKZe81y1TEbGHOxmz7253AhE5jQ/Wip\nn6UZdu2/wiG0+Y4hiG+uTvxqhDiZVpjWJhLgBTJXzGxiJR7m0qQ+9Fl36+Yd\nwkvRN9XpUXwBu0dX49Ps8jNQQ9kS0uj/Yu5/TqZzsmUtHvGBsou7fFIl4xs9\nHuECA3JmKWDWHmcZLbKRPhl73j5tRbwBEDqJ/jX7SqoP7NTiVJ33XrviBAui\nRpXK\r\n=ZxOa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQtJWW3MFARjf4M5pWtncCjyR/4y/Xa3Ma6AG0jsYFzwIgJNZ1webjuZV9Jf4VpBtgRgjF0j2lv5SrtYuhBncV/v0="}]},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_0.0.4_1532985126532_0.22823458917812633"},"_hasShrinkwrap":false},"1.0.0":{"name":"msteams-react-base-component","version":"1.0.0","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"tslint --project ."},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"tslint":"^5.11.0","typescript":"^2.9.2"},"dependencies":{"@microsoft/teams-js":"^1.3.3","@types/react":"^16.4.7","@types/react-dom":"^16.0.6","msteams-ui-components-react":"^0.7.3","react":"^16.4.1","react-dom":"^16.4.1","typestyle":"^1.7.2"},"gitHead":"12fc65579a8b296fbece541c46a631dd8162fe12","_id":"msteams-react-base-component@1.0.0","_npmVersion":"6.1.0","_nodeVersion":"8.9.4","_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"dist":{"integrity":"sha512-VAmMWoYIiJu1azrQAJqZXj7YWy/7dyqY7gp8HfbszC9w+4+H1wXbQmLIQakrNE6oZ6rPdBmXDddco5tUAmJzRA==","shasum":"e71d429cc3f8b1cf4ae83220010e41d97cafda4b","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-1.0.0.tgz","fileCount":6,"unpackedSize":12872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbccXUCRA9TVsSAnZWagAAaR8P+QCvqBmi1ydm/2e9dTht\nCbst6CB0g+JhAAQ0Xg/YN0P9FfRqpfWGLZ38WVktKiVXbsljYzfctkxoQll4\nT91j95fA5PQwlxtLGu73t2CEIhKEcTt5+KGtvxUe0tucqM2e0cQuhP0J4I6M\nNpJ6xtknwBJFTietJirhP6FyRJiorVShD0/5LQG8KOxBmbsR6Ie0cmhtyIU8\nXAntf1/qwLW7UeXTsi40sUV/hH1hobzT9aGeATwilUIf4jO+RTx4swdFUD7X\nWYWVuaJYxYZd+gxZVMhlkro3gXrzj7ZLJ4rAx1RKEkgU1yrG7X0Y9G/ZCq7m\nPuIbo5bwNpYBPBPBvYE3mC3KDWXellrr0xHWO6dnE4Lwh1AZ3BdS2HEttTuW\nXKQe3HfjqwnFjTV9Wzz+aTFEet/Jq8lio5nzaz+kT33rzRTakEHB2o1pTkGJ\n7qzaVOSv6mq9rXt3Xht/i7x2Uw+yulKJjlBA1ZPT3CFaOBpLKSSlfDLVBYC0\nxB76tXcDnWWcJKd9tMDSNHbxArNJvRKEK4i9Tv7JokSvWsQT8tuP+Fl2mzyC\naJlMd5NC9mkljeC60HT9/h8DGQ9mjTei3Q8vGoHXazrqqUBMANcQcnFxTz3d\n5Vteb4vxGY/VT75FeK+Y3B+VeZaoAIdfuyi9Cf8w6/yURRaxEUU0h+lpnffR\naypi\r\n=s7Ih\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVDbRMf/9NFI0CBgndc8zamSp4uH4vCjA8js8S+ms4RQIhALldJIERcGC0l4w2rjF1/EGtU8IM5N75y11c3QOkNgfJ"}]},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_1.0.0_1534182868089_0.8229287240229433"},"_hasShrinkwrap":false},"1.1.0-preview":{"name":"msteams-react-base-component","version":"1.1.0-preview","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"tslint --project ."},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"tslint":"^5.14.0","typescript":"^3.3.4000"},"dependencies":{"@microsoft/teams-js":"^1.4.1","@types/react":"^16.8.8","@types/react-dom":"^16.8.3","msteams-ui-components-react":"^0.8.1","react":"^16.8.4","react-dom":"^16.8.4","typestyle":"^2.0.1"},"gitHead":"05f2d3119e2c07ee436501e925c0026ac28e4872","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://badge.fury.io/js/msteams-react-base-component)\n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport {\n    TeamsComponentContext,\n    ConnectedComponent,\n    Panel,\n    PanelBody,\n    PanelHeader,\n    PanelFooter,\n    Surface\n} from 'msteams-ui-components-react';\nimport { render } from 'react-dom';\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps extends ITeamsBaseComponentProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n         const context = getContext({\n            baseFontSize: this.state.fontSize,\n            style: this.state.theme\n        });\n        const { rem, font } = context;\n        const { sizes, weights } = font;\n        const styles = {\n            header: { ...sizes.title, ...weights.semibold },\n            section: { ...sizes.base, marginTop: rem(1.4), marginBottom: rem(1.4) },\n            footer: { ...sizes.xsmall }\n        };\n        return (\n             <TeamsThemeContext.Provider value={context}>\n                <Surface>\n                    <Panel>\n                        <PanelHeader>\n                            <div style={styles.header}>Hello World</div>\n                        </PanelHeader>\n                        <PanelBody>\n                            <div style={styles.section}>\n                                HelMy Tab \n                            </div>\n                        </PanelBody>\n                        <PanelFooter>\n                            <div style={styles.footer}>\n                                (C) Copyright Myself\n                            </div>\n                        </PanelFooter>\n                    </Panel>\n                </Surface>\n            </TeamsThemeContext.Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@1.1.0-preview","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"dist":{"integrity":"sha512-R3sfSVSf1Dk5LXj9pc0axzRR8IPUSkh4vo7+Wklvp/4T/PRCWnjXtimyuwtOcQHyiB71XLPas2HJYuL7Us5kGQ==","shasum":"eb616eb9356349596e19bd9996d4e1c28030ca51","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-1.1.0-preview.tgz","fileCount":6,"unpackedSize":12301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclV6dCRA9TVsSAnZWagAAcv0P/27ruZzYPdXABVs6on9Y\nTqsIuxBZzFSN0a0o/xxh9BKAVZwWS9IWK12F74cGfA+udJCzCCsqGI260NW+\nrLSTpTBvmM4bngr8IJQaOzyF444/vs5/oRfO+/DXNYgPs5tPJtTG4G8kFvTi\nV45ftGgkvFcIbSx/isSvkuSauRMeMEeoybWJnYvjW6P8J9WkpSkUxHnUyVcY\nJWxo6Jx3OTo902uGdYTmwAZj6mhdy5YL9P5kFKpBm8Im3aFS/YkeP4JRiOwK\n7OtGh5wN7phNwwM5RPsHlHEzxVhzpyKgOJWZo5UHQQ6irX6ZqXIUVXmdzwq1\nFm1RGyl1JMnxdivRhdzCPtDQpUm5qd0wo8awFtSdCVY0Fkkt459hLacHPyYf\n0PYv6A0h+8LK3aV1lr21H5xf3Oy514BLXgMRy+ASyh/uqfIXA+NHTwqH/ljA\nPhgiWxL5StkjlO1o3QxdJUipRVTd5Ej+OJzseRnL3MNsZcPEhopCpnFxP3vs\nFUFAPYgPDAF1WfAa/m8rYaYJsntSLK1mncJmbzx/NiPLMQSne1j/H8GpYTkL\nMD/z0LhJ7Y9akTicmwzYd00swKQlyb+MpYDVQvSEutsxgtjg2T3rZXyjhroj\n3Btm73GmkEnoFjPwVOtSw8n5db90oYAwdLpfElv4i72K2DvkKsh8quW1ogkH\n93r0\r\n=JMF9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvFi0YG0azkSGvmKr16FYxaa3IJnSK8HIJnDlrz9owkAiEA2yfaWJ2LIJheFs3uTjzxcGUsfIGEr7jlw1bJwHhoxHo="}]},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_1.1.0-preview_1553292957048_0.24729262555249476"},"_hasShrinkwrap":false,"deprecated":"Please install release version 1.1.0"},"1.1.0":{"name":"msteams-react-base-component","version":"1.1.0","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"tslint --project ."},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@microsoft/teams-js":"^1.4.1","@types/react":"^16.8.8","@types/react-dom":"^16.8.3","tslint":"^5.14.0","typescript":"^3.3.4000"},"dependencies":{"msteams-ui-components-react":"^0.8.1","react":"^16.8.4","react-dom":"^16.8.4","typestyle":"^2.0.1"},"gitHead":"996e7ccabe737c502a8e72e59ff5a956c55b9ade","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://badge.fury.io/js/msteams-react-base-component)\n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport {\n    TeamsComponentContext,\n    ConnectedComponent,\n    Panel,\n    PanelBody,\n    PanelHeader,\n    PanelFooter,\n    Surface\n} from 'msteams-ui-components-react';\nimport { render } from 'react-dom';\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps extends ITeamsBaseComponentProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n         const context = getContext({\n            baseFontSize: this.state.fontSize,\n            style: this.state.theme\n        });\n        const { rem, font } = context;\n        const { sizes, weights } = font;\n        const styles = {\n            header: { ...sizes.title, ...weights.semibold },\n            section: { ...sizes.base, marginTop: rem(1.4), marginBottom: rem(1.4) },\n            footer: { ...sizes.xsmall }\n        };\n        return (\n             <TeamsThemeContext.Provider value={context}>\n                <Surface>\n                    <Panel>\n                        <PanelHeader>\n                            <div style={styles.header}>Hello World</div>\n                        </PanelHeader>\n                        <PanelBody>\n                            <div style={styles.section}>\n                                HelMy Tab \n                            </div>\n                        </PanelBody>\n                        <PanelFooter>\n                            <div style={styles.footer}>\n                                (C) Copyright Myself\n                            </div>\n                        </PanelFooter>\n                    </Panel>\n                </Surface>\n            </TeamsThemeContext.Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@1.1.0","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-T7XuxKHyIzxTUwPew6ZF2B81I2/gi0mxQnYDaDjvEGiuRP8dm5qVE8lQtBIhcETPhmUE0war7/Hama0lTU4mzg==","shasum":"777a77bf00f4bef95da381c88e89bb10c7ba88d9","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-1.1.0.tgz","fileCount":6,"unpackedSize":12307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcl8NxCRA9TVsSAnZWagAAEEsQAISYfE8qpkTLne8AjidO\nzF0NTKSEd69nPtFLWdSP75BLdSTUQNRqSGh5fJn9zPKo0cp0v2Uq/pwaJW2V\ngrOViWoJihEbunJ7o4quiOl9IjSR/fx5DshPkqgdFYdnS8DZJCYtfvsDUhxo\nnNrBpGaV917qEPMuAlzl/PxsG3VC5PNU+WRSmzzx/TOZ+do61vMdHfDLh8te\nPx7hbIdSyTNO8qfTbV3qEC3ePVb9d7aTSUa/w1PQs0CzC1k6yUoEWydPOqSy\nr/JEU69qcWntjgYdlm5mYNC08jPhmUgA4lqP8Ec/yz/qhRuEWeiywb7A3JeE\nCpScc/eKNoGWPaUefAe0H33iF3mSxQgxaUe794krhjPo31g2HgC6EBDNxki4\n0HFGrBYMY7XT1bCuOIhSGoxxeCiTGvDzCTw3cn/0hUPTZdZAvVvsOFHaZbQP\nZ12gSLsdikYgcuPX6pzCQXSdlxf2ulcs8wAFL89+A1aXgnxW6Gn0ik9490ET\nuRdVY4B8xCEf9L+8A3rUD2nf0uMPx0EVD2333ZieiDlPt7Ik9iZ4ru5VTafH\nhDPLOc44v2kFtC54af51wk1BmD+tByH0nE/GpzeHSOF9nVoFXjbwTpZU04nz\nVBaqWF1E0yf0j9vfWmq7OVvFF7SF2SWHnPCcs7O4OgAi7TAi4RMkT4a0vLpb\nstla\r\n=l//J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyllrTyWra6PkBsHIkq+eqVyZ6KpbfO+Pq7uQujFbhkwIgRDgtXsxzo3ilqpQDgVTKLVX9jPEUkfjb5w8hK3a/uv0="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_1.1.0_1553449840815_0.7921062002171562"},"_hasShrinkwrap":false},"1.1.1-Preview":{"name":"msteams-react-base-component","version":"1.1.1-Preview","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"tslint --project ."},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@microsoft/teams-js":"^1.4.1","@types/react":"16.8.8","@types/react-dom":"^16.8.4","tslint":"^5.14.0","typescript":"^3.3.4000"},"dependencies":{"msteams-ui-components-react":"^0.8.1","react":"^16.8.4","react-dom":"^16.8.4","typestyle":"^2.0.1"},"gitHead":"396d1919a0c9f039ad2fd5d8adcf73e83cc96cf1","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://badge.fury.io/js/msteams-react-base-component)\n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport {\n    TeamsComponentContext,\n    ConnectedComponent,\n    Panel,\n    PanelBody,\n    PanelHeader,\n    PanelFooter,\n    Surface\n} from 'msteams-ui-components-react';\nimport { render } from 'react-dom';\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps extends ITeamsBaseComponentProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n         const context = getContext({\n            baseFontSize: this.state.fontSize,\n            style: this.state.theme\n        });\n        const { rem, font } = context;\n        const { sizes, weights } = font;\n        const styles = {\n            header: { ...sizes.title, ...weights.semibold },\n            section: { ...sizes.base, marginTop: rem(1.4), marginBottom: rem(1.4) },\n            footer: { ...sizes.xsmall }\n        };\n        return (\n             <TeamsThemeContext.Provider value={context}>\n                <Surface>\n                    <Panel>\n                        <PanelHeader>\n                            <div style={styles.header}>Hello World</div>\n                        </PanelHeader>\n                        <PanelBody>\n                            <div style={styles.section}>\n                                HelMy Tab \n                            </div>\n                        </PanelBody>\n                        <PanelFooter>\n                            <div style={styles.footer}>\n                                (C) Copyright Myself\n                            </div>\n                        </PanelFooter>\n                    </Panel>\n                </Surface>\n            </TeamsThemeContext.Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@1.1.1-Preview","_nodeVersion":"11.14.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-ksGTV6XzAW3wD0o6ThX7YJw74EeVKiUsF+Fg6wGiFfv0qAYuh5v9gSNCQOIz3Yr7CEzETElWDHgj7e8n6SqovQ==","shasum":"0c249c7e90d2a5d2e43a691f8485a43817bd6fcc","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-1.1.1-Preview.tgz","fileCount":6,"unpackedSize":12314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctul+CRA9TVsSAnZWagAAQ1sP+wZMTnnizFJPms/7M6lE\ncn/wBe0Bzg5fke9VId4llQ2kCcCFFYBHMbw1y0hr199QrOq9mp18UUShWtBR\nK3q9bq+fCgimBc9ZC3ZsrCPpPpAzT78gG+KjkJtirwCTsPPNEPyQVdXbk+Ed\nkfGXfHrfYiAZ5tcccGJmAta7EaUbqVej9xoDneBg6zsGdWoQKmH4klKDVAEs\n+KEzlIlqcDo7rMRNvFLCsePjiyLtbOIrIkQ4IMV1XweS0x9behqdY8Gv5dKu\nuNGzocFSzye0AM9/DCMqDHokTSBs//q8ap2gP0byhxS3tLaCE6Y74NGnEbza\nMKEdRbAKMaxR6S2qLy7/uUnkdCuLJEqKA0ZGFqqwmdwEAz59yy/EiVIUTkFW\ndYyhOmutM4LwhGdklN0cu6wWQDaoGLiDGZq5UCDmRlOmDKrppFPskEJAvzDa\nzCzPRDe6IBUKlMMy64N1UyA7YedH8xzyobDuHDBUCwri1a3ZKmTEYhBfGurw\n/415P8SkBwQk14gTD+eTER8TxpSppaOesrV4lZXXqLMEkV3MT9yHKIVqD22d\nIdRqVLDIkEgXmHiVGBCUxOkWo122qxoBlXBeedns5EL4jzStlUtDTVzp7Elv\n5OQTOpkTt+TxNJgiivtggVhD9b1Z/W38PGgXdjUjyBuCiya3ITGCpc4cXe1K\nb9oc\r\n=wcEv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUcuZ8JmK3p6AfgiqDg3ZLmuQqRzDEenFRott5CEkosAiEAqx+WVR2aT9w5OQPbA8hqjhm2izZKeCATYdb87m/X+yk="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_1.1.1-Preview_1555491197986_0.03301808991614208"},"_hasShrinkwrap":false,"deprecated":"Please update to msteams-react-base-component@1.1.1"},"1.1.1":{"name":"msteams-react-base-component","version":"1.1.1","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"tslint --project ."},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@microsoft/teams-js":"^1.4.1","@types/react":"16.8.8","@types/react-dom":"^16.8.4","tslint":"^5.14.0","typescript":"^3.3.4000"},"dependencies":{"msteams-ui-components-react":"^0.8.1","react":"^16.8.4","react-dom":"^16.8.4","typestyle":"^2.0.1"},"gitHead":"49bd8efee3f6c723601d124234fbc9923b46bcde","_id":"msteams-react-base-component@1.1.1","_nodeVersion":"11.14.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-xbC2Uk5rAHbmo0+QikMBUuk8NlkpJz+v5gkDloH7pdLHXQW83UCI0236ZQFIltJ9CoSu+ON92t3I4NXsKKMilA==","shasum":"96cd537654c2e76818fe2b8fe73ae9f64dbdfb61","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-1.1.1.tgz","fileCount":6,"unpackedSize":13066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctutCCRA9TVsSAnZWagAAU2cQAKFTcyFx2qdCoGREU1M8\nsW2ujL6U3KEghWlAfd34VaMt7I51nb3nvVVmzXxaO5Qj7IeMqYN/xUgXqWSo\nlwReZMziD0C4r5rSLFYy0qdZCg62BIv4kGfzVMCfgC2wWvxBcWU5nKk6ZB5R\nC9F98o9UmkSZDeYa144P7vb2gnksxxqnkQxsRQBowknLXmEVICZRnnabLgzK\ngWrl7eIMrnTxMbGdOMXVq09GZfypfS8X48CVis+ibYa+tZr7mhRWXQFFqh7n\n//MOjxBPQEzldevH5wdXethwcCJIL2AlcIAk4OUa9ANhQnEruZFqTfV41c/i\nS1vU3+h7krdpvg9VQN9iLWWFULIMmMczV0S+peUxmjRFJjCPgspxFaIREK4T\n0uHbAQUs7BpTuKdEVMFBt8HcS0ZRIQSeFdnzpbyKajtbgLbDKN5c2B3Hq3yT\nBjyRZqRmcgjCyOFrr5Y+43V39ZxQ5bspvWsXAnMXQrxdJPWQZ1thVeMDKLXt\nBpSkEuOSFP4sNkWJ8ZzxQW5KYkas87WkWKuk+6kXn6E2t+kvrMw+zTaYfFBf\n1nbadEEZgbg7GoFwMSt4V6AlwOZ6Ujd9WcrwseHRtmgR1yteFNFQcPdNpjkZ\nUmyGRI6zFo/VDTrAyvJsvDAzOZ5SIudMyx0oSATE2ly6mb2IWSRpCgbI36i7\n6DG2\r\n=z3V6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBST424zIsz+nfImYpBmoZUOyCW/74vab1TNTcHNgX/cAiEAg4W5EWciktMduJFJi6A9JGTX1zaPLF/g5Va/RoI7Y6Q="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_1.1.1_1555491649921_0.7029494073565301"},"_hasShrinkwrap":false},"2.0.0-preview":{"name":"msteams-react-base-component","version":"2.0.0-preview","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"tslint --project ."},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@microsoft/teams-js":"^1.5.0","@types/react":"16.8.10","@types/react-dom":"^16.8.4","tslint":"^5.14.0","typescript":"^3.3.4000"},"dependencies":{"@stardust-ui/react":"^0.38.1","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"ef27bacfa4b3397a6f3808bfd7aaacad72c56f34","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed) \n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport {\n    TeamsComponentContext,\n    ConnectedComponent,\n    Panel,\n    PanelBody,\n    PanelHeader,\n    PanelFooter,\n    Surface\n} from 'msteams-ui-components-react';\nimport { render } from 'react-dom';\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps extends ITeamsBaseComponentProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n         const context = getContext({\n            baseFontSize: this.state.fontSize,\n            style: this.state.theme\n        });\n        const { rem, font } = context;\n        const { sizes, weights } = font;\n        const styles = {\n            header: { ...sizes.title, ...weights.semibold },\n            section: { ...sizes.base, marginTop: rem(1.4), marginBottom: rem(1.4) },\n            footer: { ...sizes.xsmall }\n        };\n        return (\n             <TeamsThemeContext.Provider value={context}>\n                <Surface>\n                    <Panel>\n                        <PanelHeader>\n                            <div style={styles.header}>Hello World</div>\n                        </PanelHeader>\n                        <PanelBody>\n                            <div style={styles.section}>\n                                HelMy Tab \n                            </div>\n                        </PanelBody>\n                        <PanelFooter>\n                            <div style={styles.footer}>\n                                (C) Copyright Myself\n                            </div>\n                        </PanelFooter>\n                    </Panel>\n                </Surface>\n            </TeamsThemeContext.Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@2.0.0-preview","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-mhXuFTvZLQjP0FdAxqBvFQejJwbC8nMFuPLtldKrZRFNjYoHQ+18Cv3sZMDFudz8LsEIBDLoFNngn3s0xX/L2Q==","shasum":"49a24664834a96f439b4a794674ad80d6e46cd89","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.0.0-preview.tgz","fileCount":6,"unpackedSize":13116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiL2MCRA9TVsSAnZWagAAY74P/0R7OWbPyNM5w2nrTV9O\npygqxxryrvUMTQGI90C3J6yV9W6RYOvkfEHyvvrTXgso6PkzFeXJ16v9/QKQ\nugigTY+/4m0BKHfrM9enZUlGmseCW5ROSjYNLyuF4K54ifOsgDa+jI4RvwbQ\nUBSl/PWbI415bwG9/+CFDH4Ipe8D0evB5dT9wT8D7nuVXJIEpTgViDnTBmWj\nscHHHfT6k4l+5pY375qxA2WSCwQLs3BX4aTYjY54DK+ITHbIwXkL20Lm9d6l\ni3gQEi3YzY9em1qzpU4KDZOBCTPiwuKZeY25quI89lwlGaZ0mmGPczbJROmT\n7fI+/w8IOC8ug2d2DwIp8eES/YxyPb4Y/PIU90OXe4dybkcWbBeDpPZS98Q1\n6ieiicfqfjouBqX1PGJ2JeQ8oXuF69DHeFOS3DDeFhm3lLO5e66zc56Eq6Xs\nwaPF0nfdzXkll+Hr+/UTiqoWh4o36c6tkUIB82ip2NErM+incQGBG9ArI4Rc\n0YKZipzU2bFI/C/1WIJUT/hxoY04t4BknWIHG5Cjf6YsLfsFCASoEOpxyn7K\nSy/EicGz0MyAPM7Gy1RO819Su2gv3oOfxrQqJRN/kpWDWYQTty0/VNPplmtk\nDkvbJmt+tdLYqozcgs9Yet33nEm+0+MdXGb0dsrweAAG80Y7pFDr9ciosR9d\nHGT8\r\n=lsKI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDRM4geio1UXB/78Azyk1PEFX1Ab8s0ZhDtNCo17mlUQAiBI6mNUngjQUKnNtoqKUKWgpK8iS69UQEByEAX4e1yxAw=="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.0.0-preview_1569242507635_0.38310151435025097"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v2.0.0 or later"},"2.0.0-preview2":{"name":"msteams-react-base-component","version":"2.0.0-preview2","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"tslint --project ."},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@microsoft/teams-js":"^1.5.0","@types/react":"16.8.10","@types/react-dom":"^16.8.4","tslint":"^5.14.0","typescript":"^3.3.4000"},"dependencies":{"@fluentui/react":"^0.43.1","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"c8d18f0a24747f120ddd2fdc43611010bd31531f","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed) \n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport {\n    TeamsComponentContext,\n    ConnectedComponent,\n    Panel,\n    PanelBody,\n    PanelHeader,\n    PanelFooter,\n    Surface\n} from 'msteams-ui-components-react';\nimport { render } from 'react-dom';\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps extends ITeamsBaseComponentProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n         const context = getContext({\n            baseFontSize: this.state.fontSize,\n            style: this.state.theme\n        });\n        const { rem, font } = context;\n        const { sizes, weights } = font;\n        const styles = {\n            header: { ...sizes.title, ...weights.semibold },\n            section: { ...sizes.base, marginTop: rem(1.4), marginBottom: rem(1.4) },\n            footer: { ...sizes.xsmall }\n        };\n        return (\n             <TeamsThemeContext.Provider value={context}>\n                <Surface>\n                    <Panel>\n                        <PanelHeader>\n                            <div style={styles.header}>Hello World</div>\n                        </PanelHeader>\n                        <PanelBody>\n                            <div style={styles.section}>\n                                HelMy Tab \n                            </div>\n                        </PanelBody>\n                        <PanelFooter>\n                            <div style={styles.footer}>\n                                (C) Copyright Myself\n                            </div>\n                        </PanelFooter>\n                    </Panel>\n                </Surface>\n            </TeamsThemeContext.Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@2.0.0-preview2","_nodeVersion":"13.7.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-5lwOVyeeDg0SCkai5T9Rnt0HAn2ZhxS5slkJCQPNgJHRF0Kxzk5CNCPp+N1pA5xUAPt35ZucnnC+AW3AEhttKg==","shasum":"632c4711174086c4223fb057858e896393bdacdb","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.0.0-preview2.tgz","fileCount":6,"unpackedSize":12185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOhwdCRA9TVsSAnZWagAAjXMP/3OiA7B4a914kj64s48O\n1jB+mlBadB60Y3I/IhynflX6dlSmvVqwDQj1RPjIJB80b0/uAM3+NPZ7wn4D\nLCi1jSDAf4gwoh/RdIc8xKKGfXgyL0qXdoPNF/bctBMu2WOf5J+XOFebstjp\ngzYusWzU4NZTCwj57x2uSSlPF2Zu9kx3zTUXQEet9/KWKGiRrb0FwQME08kU\nKyaCy3AONuV+ZNTJVARIdGCyjT1nIuIXz5wNgNDuFc1s96dEupVMT/RfUP9N\n9d7UzX0QoV+g8Rnv34pE3RAxSzStF1Rj2yHvJQzwmAvxP7/KvZ/O6KI3IIaG\nLzcQAsnb2yhbHLiCr8KZZbEGzMvL+XyTrA0xwPdVYZabnYezu2Zm+AKEWWjG\nJBcKa4rtxNaAD1OXYSf/zx1YWo8Db3bTBv81oCFrTdcc7Z56fVaUUhgaoUy0\nzZV5hNCM4Ujn1+nbpoMCoyXS/8taiaG5I9/VEiXwWSMoYvT12rX7T/ETF2q/\nFjKjold099svGG6CH7pImjnQyjKSaeLRcioMK07SMC568CnozL6Ymtg7c37a\nwWcMtrDo2+4AtzdbON+gTTPn5Ov8uy6J7AsJtDEwRIViZTph+8qwW0IAFNSQ\nHM+B5OnNugnTVkFcabICRbGVrrvv4eJ3ooAZJO8OY22X2acuLjePcFV4lDiW\nz4Sx\r\n=3PZf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7M4HaFqsyMacmfsA8ohlkYiqiUebOuSGKF1IVx3FbQQIgYQlL5IPNXG+UrXVmZctUrhmAME+uX8FEZhf5IEyKRhA="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.0.0-preview2_1580866589011_0.8356917787468645"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v2.0.0 or later"},"2.0.0-preview3":{"name":"msteams-react-base-component","version":"2.0.0-preview3","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"tslint --project ."},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@types/react":"16.8.10","@types/react-dom":"^16.8.4","tslint":"^5.14.0","typescript":"^3.3.4000","@fluentui/react":"^0.43.1","@microsoft/teams-js":"^1.5.0","react":"^16.8.6","react-dom":"^16.8.6"},"dependencies":{},"peerDependencies":{"@fluentui/react":"^0.43.1","@microsoft/teams-js":"^1.5.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"57fb7742e4cb04749f3e99099d4101b22ba1d962","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed) \n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport {\n    TeamsComponentContext,\n    ConnectedComponent,\n    Panel,\n    PanelBody,\n    PanelHeader,\n    PanelFooter,\n    Surface\n} from 'msteams-ui-components-react';\nimport { render } from 'react-dom';\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps extends ITeamsBaseComponentProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n         const context = getContext({\n            baseFontSize: this.state.fontSize,\n            style: this.state.theme\n        });\n        const { rem, font } = context;\n        const { sizes, weights } = font;\n        const styles = {\n            header: { ...sizes.title, ...weights.semibold },\n            section: { ...sizes.base, marginTop: rem(1.4), marginBottom: rem(1.4) },\n            footer: { ...sizes.xsmall }\n        };\n        return (\n             <TeamsThemeContext.Provider value={context}>\n                <Surface>\n                    <Panel>\n                        <PanelHeader>\n                            <div style={styles.header}>Hello World</div>\n                        </PanelHeader>\n                        <PanelBody>\n                            <div style={styles.section}>\n                                HelMy Tab \n                            </div>\n                        </PanelBody>\n                        <PanelFooter>\n                            <div style={styles.footer}>\n                                (C) Copyright Myself\n                            </div>\n                        </PanelFooter>\n                    </Panel>\n                </Surface>\n            </TeamsThemeContext.Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@2.0.0-preview3","_nodeVersion":"13.7.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-cRXXRP0PzSHbEwYDoFXEbR9+44qYIGjTfI4YpvTE99lvQ9/xtE9ZxYBRmzI5/VtT7SXKrFZsQ/AscjhfaQWh7Q==","shasum":"44dd5fcc51b62d0aca237cc99a560237737cf6e8","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.0.0-preview3.tgz","fileCount":6,"unpackedSize":13299,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOsaUCRA9TVsSAnZWagAAbrkP/22nMxxutg/WLPtINd+i\n2+0bVH8dr0BkJz1k2DI9xWFLdto4K7aMUSbU9LifPS+ek9LZk3dy6gp7cjBg\nlx61EqbmnElS6g+FWqjFaTBjuFGlBdOaKMAWE2Q56OGDzM/7pRBRSzugKyuv\nZv21zAntz243kgDtYfVM++7IRtpJSjGr30AAAz6+jeRy5aVDY5Z2N5BUNlNs\n8o+UEKjCONvUCJeLolVC5qrWMFCZZz+aa/Ta6RRjGlWc3nA46Nm2IlDgcty0\nLXcMyd2hJi6WIUEeKWrzHs4SvQVYetpnxbdms2NS5I9/PztX9lVwaho2o07C\nywy4+SP7/h4aw6YtCCjFttXNA9gCFVs7o5WzYKhCf2JeXlKiaRIAMQApoLlO\nrSieq3LicuaCrtcHf9itzTnlKpBFioKU+Xu6CmSSt626qed7OAcuctoaLI/K\neWPAsRck06DxestYog1NrUQw/f6iMiLrlJ04halgoTNe8RhjT1KvrxY7GRXM\nBazRhyAsemZUTtrRybrAP3DfjYtL8G76IFrDN3me/+VeID0kDfDVZrZG+XrS\nGFWdqhuapPP1Wz0knphnUVMlFOPBkoRaIyvhJBUL1om08wABECzdsXhGYU1H\ng7AfnVVyxZEbJxUM6MB40T4/EtXzeDrVMB0AHJ0zcnaC23hHNj5jbJdLHbZb\nU9K7\r\n=GwNH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs4cdl6Uy0NWL8dHyoYdtf5V3ZiggFapHEHicx+jnQPwIgXFdySky3JRNxOBh5PQQ30DacuqrD0yoDQTH80E49NYg="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.0.0-preview3_1580910227708_0.6653700273250676"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v2.0.0 or later"},"2.0.0":{"name":"msteams-react-base-component","version":"2.0.0","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"tslint --project ."},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@types/react":"16.8.10","@types/react-dom":"^16.8.4","tslint":"^5.14.0","typescript":"^3.3.4000","@fluentui/react":"0.45.0","@microsoft/teams-js":"1.6.0","react":"^16.8.6","react-dom":"^16.8.6"},"dependencies":{},"peerDependencies":{"@fluentui/react":"0.45.1","@microsoft/teams-js":"1.6.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"de1dac233d2ef002ccae752ddf6ec876c1cc39ba","_id":"msteams-react-base-component@2.0.0","_nodeVersion":"13.10.1","_npmVersion":"6.13.7","dist":{"integrity":"sha512-1AZf+BY3xlTwAXlsiE5edIPqfchgZGu5rq9Mjr5APbFVnu0b84es6f1lB862gSio3TBbWbyxFF5hWjmMLTw5Sw==","shasum":"d448ff91b6ea29798f589135eb89fa866db69ab0","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.0.0.tgz","fileCount":6,"unpackedSize":12690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYMmLCRA9TVsSAnZWagAAmXoP/2biZSAEUhGzCnXbg3x7\nabqV6mNULHJhLqdbatMIb20R4fh82BEanbZTLJTFkUv/2ZLtRjXy4MEcbyX9\nbCuHB596D8SwTwmwC6GN4bEjY3oofDsUIhcCbM/ffJu0YbPJhKLFpWze9h8y\nE3Cd6tmox0JpvQxBd4WayIVegrMqcGzrAtzd+Yg4F+u32Xu6X61V7xj1iTsS\nPmtXDrk12B1PbWGBtMrEquwOOOEq2QILtMzp9SOFrZhb98B0c3RR8l1WoXNl\nNMIS7BKZKhyNsNjKbR58ebpjVxqjEky6QKluWlAczLq4v7gpy6Y+ecNmUBOu\nK7aoxE9bzGXS+7UJL0KTcmDCP2njYakkpBUY8m0wvpjK7+GnJ8FdU2OFVa0w\n2wduJqlIaJvm1cs3acZu538H+1L8EsofbgORkOXPkyBz+AhI1YyDfKGi4Cos\nViUUWc6qoIHmQ/oPzha/0PnsKs+MVBPdBocbYkxYlXvt2z4PhUDBmQhEIjwD\n9bIFw7HhyvNA5opgTRC0ACiDUCb7ZO/a/Js+cCEkeVODlWtPcBet0DffyBfI\nhywHyUvFS7vq8SHguCWz0LXb+aDPUrosLmj3iObg3NN+IWrutS8h1dsa7/R7\nNyWiZndzizW5apkKiIlsy2IrZQQeHY2FqVptNglEvIaGwhYl+IsUAwviqIge\n/MXW\r\n=b+nm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHyVYnCzz0aO5cvW1JFYeG1HmwWk45L8HMIOfS/jb4aGAiEA2ACVU02uWLzqWuEXlsHCE+sSIQB9EQ9rl3+jY+4ckl0="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.0.0_1583401354609_0.43262618552645704"},"_hasShrinkwrap":false},"2.1.0-preview":{"name":"msteams-react-base-component","version":"2.1.0-preview","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"eslint ./src/**/*.tsx"},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.48.0","@microsoft/teams-js":"1.6.0","@types/react":"^16.9.34","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^2.28.0","@typescript-eslint/parser":"^2.28.0","eslint":"^6.8.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-standard":"^4.0.1","react":"^16.8.6","react-dom":"^16.8.6","typescript":"^3.3.4000"},"dependencies":{},"peerDependencies":{"@fluentui/react-northstar":"^0.48.0","@microsoft/teams-js":"1.6.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"1478331e7639c7995b882f31b3d761f5d6c5aa9b","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed) \n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport { Provider, Flex, Text, Button, Header } from \"@fluentui/react\";\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps extends ITeamsBaseComponentProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n        return (\n             <Provider theme={this.state.theme}>\n                <Flex fill={true} column styles={{\n                    padding: \".8rem 0 .8rem .5rem\"\n                }}>\n                    <Flex.Item>\n                        <Header content=\"This is your tab\" />\n                    </Flex.Item>\n                    <Flex.Item>\n                        <div>\n                            <div>\n                                <Text content={this.state.entityId} />\n                            </div>\n                            <div>\n                                <Button onClick={() => alert(\"It worked!\")}>A sample button</Button>\n                            </div>\n                        </div>\n                    </Flex.Item>\n                </Flex>\n            </Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@2.1.0-preview","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-jUw6I8XrepHQzDPWhF/9tJCunEGy8KL1ChDGqKipYmSfVlYMC/IiqfrKxLZZaOrzg097jcW5cnx2guo5uM8gkg==","shasum":"c3fac1d7ed763beb4d0675c1405df899a34763ac","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.1.0-preview.tgz","fileCount":7,"unpackedSize":13524,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenHHHCRA9TVsSAnZWagAAGKMP/Rd1ASpLWTkEhrqj3JwX\nkWjlTN3idq4GJbUg2tSDbd3WAtg+2EJrsEj+wTQpzEi3xRPSae4jJgcMlYKL\n3gM85VEoPnZcZAnENOejzjYefVTTwJeoj2zOmnypLYo1tfi0VRrelv2VerTT\nfc/L4PyYpV2Clx+pQRGDdUl6wwDwZtf1IaHJ20jG/mc1nKwqDcnmt5M2fbyS\nCy07Pi9/c0/of/PuoAMIUgKMVhsAJvtU/yhq+EVXqbxbuBLsin8UacDx5WXL\nyle2FB1OuWimJo8HDW6lyscXeO+VRI4wh/v57R61mCATY46FAbpKAUqWtnea\nA8TcLyAgeU3G9X7hnjdYYfDq9JXLvgReBk97gBzyQladHeN+6j9yAYIIJeEW\naGviuwlcqkWgQCJdcLiqP2H5KwnvX/tLsU/G/CAMzRxkK9NJ6E5zn0oKXb/D\n3PA3OazFn72QOKcgofMYi68q2gSIGctJXfKFy1pgsbsjeMcH8DXQA7QJcNq8\n8g5YuQ/wx2u4JwBz5SYsyYthUtXBfetG1b4yT44vwt09nwfp/088zQxU9mDP\nrVks0ZU45c/HSac2YRSFHCJDhxeMQDOZGvnxyMYO2Z60zeAdh3/Bycvx3b60\nWLrGJGej9OSJbY4J0DVwNibt90jHBbEiYvxZrtSNOxY6o6McQq2i/EFIeX42\nJ5Vd\r\n=PugG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDw/Q+cb0pDma0oQ+hfamqdIW0NYiAYc0D0U49/04dzPAIgYbBwzSbEKVX8HfrVzPNLHbPJ9udq4/tA1984NlDOFPU="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.1.0-preview_1587311047351_0.03310428361883844"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v2.1.0 or later"},"2.1.0-preview2":{"name":"msteams-react-base-component","version":"2.1.0-preview2","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"eslint ./src/**/*.tsx"},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.49.0","@microsoft/teams-js":"1.6.0","@types/react":"^16.9.34","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^2.28.0","@typescript-eslint/parser":"^2.28.0","eslint":"^6.8.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-standard":"^4.0.1","react":"^16.8.6","react-dom":"^16.8.6","typescript":"^3.9.2"},"dependencies":{},"peerDependencies":{"@fluentui/react-northstar":"^0.48.0","@microsoft/teams-js":"1.6.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"c7396e562eb8b35d27f3ed9d168ed9e5e015eb00","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed) \n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport { Provider, Flex, Text, Button, Header } from \"@fluentui/react\";\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps extends ITeamsBaseComponentProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n        return (\n             <Provider theme={this.state.theme}>\n                <Flex fill={true} column styles={{\n                    padding: \".8rem 0 .8rem .5rem\"\n                }}>\n                    <Flex.Item>\n                        <Header content=\"This is your tab\" />\n                    </Flex.Item>\n                    <Flex.Item>\n                        <div>\n                            <div>\n                                <Text content={this.state.entityId} />\n                            </div>\n                            <div>\n                                <Button onClick={() => alert(\"It worked!\")}>A sample button</Button>\n                            </div>\n                        </div>\n                    </Flex.Item>\n                </Flex>\n            </Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@2.1.0-preview2","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-YS22beUwgcTM8SSqbzpjkpK+RgKT8TXXXdtqm2gYXn8HuKnxf5HCq+KRjZ/9T8+69RaCNd9CQ3z8fttiwY2yHA==","shasum":"1c4ab747a88defb56360b07753b16eb5df80ecfd","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.1.0-preview2.tgz","fileCount":5,"unpackedSize":8788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevN+jCRA9TVsSAnZWagAAPigP/2lpFnH6C2S2DeBCKFmg\nMiZdGrue0kFky49LZPx9rSldC8zEQeUyuuVYoGG03L370W93MKDptF1h6lJ/\n9KAkpEobQvvIFnwCEEXrblh+1Qpxktj1a2xsFmn3/eWH5IGXYzQ8xDgeBY0D\nWcrScleuIDHMIJqzZ5nuq22TWlFkUz4JBTH4LYSjfwDtNBksUlhWNULCL4sD\nrvMCLPN+pegpQD+Ow9x2HvgopAS+DrwTzAev2tQCq7agTwH1fACh0mRU2szt\nT5dc0S/hMjlBRaFF24kCCDMGE8ttBbgzHgXOoGWxqMfDbX+KaKiuNNnONfJR\nqlDXU/WZAbB47ZfNiDP6CNQkwSzu/pL9D5lKzdzuGdtlfd+gMs/TERnIvHXR\njsS2UvzyTeVNhRa/ZmpoQPn9aDiKUeOuE2J3DeyVzHC5xn8/h96lFsqV+9zY\n1udPVJHoT0vAzDSuqGNsrnjWW0BD/CZXrQOlLU7fkot5mdMEaSEXYLDhHYp0\nFbWCEZAIfs9FgrJVOOb84rnglpso4HcqDexlipZFxPhTVhCb+d7bdXN4pkeQ\nvdDBtzsNteE+NJkcFqkwVVg9LW6MMQS5Tc+BxdFrQ87mzNG86O0jzhbFxj/R\nYxbPmHOWhIXiEOcSM2ZgZDRrU5+lkCXUK/TonUrHQVUrm2SyyRn9hidHTGGU\ngA1N\r\n=CDKu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmuJu0blDYA4awAGePg1l+/vbTuSc6KDO26UHq6RK2xgIhAKpeTgv4nemW/eHm8/1CxVDnQyH9CmHnz1vEm6Ri/jPD"}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.1.0-preview2_1589436323298_0.31778065101465924"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v2.1.0 or later"},"2.1.0-preview3":{"name":"msteams-react-base-component","version":"2.1.0-preview3","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"eslint ./src/**/*.tsx"},"keywords":["react","microsoft-teams","msteams","typescript"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.49.0","@microsoft/teams-js":"1.6.0","@types/react":"^16.9.34","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^2.28.0","@typescript-eslint/parser":"^2.28.0","eslint":"^6.8.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-standard":"^4.0.1","react":"^16.8.6","react-dom":"^16.8.6","typescript":"^3.9.2"},"dependencies":{},"peerDependencies":{"@fluentui/react-northstar":"^0.48.0","@microsoft/teams-js":"1.6.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"e329b44ca3a01ac10ee56d5c5b3fe159fd9db332","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed) \n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport { Provider, Flex, Text, Button, Header } from \"@fluentui/react\";\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps extends ITeamsBaseComponentProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n        return (\n             <Provider theme={this.state.theme}>\n                <Flex fill={true} column styles={{\n                    padding: \".8rem 0 .8rem .5rem\"\n                }}>\n                    <Flex.Item>\n                        <Header content=\"This is your tab\" />\n                    </Flex.Item>\n                    <Flex.Item>\n                        <div>\n                            <div>\n                                <Text content={this.state.entityId} />\n                            </div>\n                            <div>\n                                <Button onClick={() => alert(\"It worked!\")}>A sample button</Button>\n                            </div>\n                        </div>\n                    </Flex.Item>\n                </Flex>\n            </Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@2.1.0-preview3","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-5shr7FdAGbkR8foBtOthLDWK+cNQonzVCoijozrTWhW8PpA5dJ7mmE1wXZ7CtWIYhFqDYCnDt7vF2Fw1knCWOg==","shasum":"e07965af1f6f7fc2c4d9f04844f304b13aa52710","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.1.0-preview3.tgz","fileCount":6,"unpackedSize":13427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevOvfCRA9TVsSAnZWagAAV+IP/i/x/zL/yJyaRGI+h4hn\n8EplhvJxvrB+HZFaDkv5QCO6GHX2AeBjKwDrBZuQP0Ei5BdLrrLhti3X0pQ5\nXOmQW0kRPiDAp4jY0rUhTOYEXbXV1xBkC9fSKFmFoOmR2YlZDxoqPKhVMQRm\nKy9hyxfMCnoMwJel8zkA+zmsdkQZcivElecX41bpU3oB5+uAFMfw6xqKRpHg\nyNOfSOmhvSzz9rnsMh83c3Lr7SNOf1yIhT8Xnop/6Sjm2NKYgq2T20FEuldo\nnHBSlMJqND3jZ28X7HEUBfRL7BDR+nIbAtbnNQCb0NcFfKlFWUwe5PsOcdyO\nmn4fi8V4PkHwjoQ2HunvqIFeWbVX7O0qIg/dcOS+FPqTZRKejQUEDfoN1h0n\ntQ8T/Iis8xZbufH9PtGaFNDP+9+Wm3U8thPWLdIQploOcOxEsk7CcMhZAhDh\nn96uOBESxq9PX6Edzyhmp68syYCvb1TZaGDj++gBAO83J8fR9LvsGn9IjFER\nuqVy5PRIjuclK/5xMpdHXD23HCCVMEU/mTF4ALt00HuHWG2nnd6gYT/efNk9\nEhcpUm0QcQo5OX2WtDo11N1P0byycftkFQ5R99m67MaWIIvi2/WMXGRqJ7oK\n4Nvc5+gPsEfH9+v1tL3PKgch/q99o6bzoV++Ur9N2qusFzEKArfeA+37lhyn\n8azk\r\n=cBb6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGJSnetD5zBsxHp4axM+CTWFvSXwlufnuoO7uqMOpkEwIgTZM2ry9w0q0AMx9WbiegI0h+HbVbEOClhvjBHdWYz/E="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.1.0-preview3_1589439455092_0.5690595363904789"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v2.1.0 or later"},"2.1.0-preview4":{"name":"msteams-react-base-component","version":"2.1.0-preview4","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"eslint ./src/**/*.tsx"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.49.0","@microsoft/teams-js":"1.6.0","@types/react":"^16.9.34","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^2.28.0","@typescript-eslint/parser":"^2.28.0","eslint":"^7.0.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-standard":"^4.0.1","react":"^16.8.6","react-dom":"^16.8.6","typescript":"^3.9.2"},"dependencies":{},"peerDependencies":{"@fluentui/react-northstar":"^0.48.0","@microsoft/teams-js":"1.6.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"9cf224a9e69894f51a88f9b5c694b0be1b55603c","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed) \n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport { Provider, Flex, Text, Button, Header } from \"@fluentui/react\";\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps extends ITeamsBaseComponentProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n        return (\n             <Provider theme={this.state.theme}>\n                <Flex fill={true} column styles={{\n                    padding: \".8rem 0 .8rem .5rem\"\n                }}>\n                    <Flex.Item>\n                        <Header content=\"This is your tab\" />\n                    </Flex.Item>\n                    <Flex.Item>\n                        <div>\n                            <div>\n                                <Text content={this.state.entityId} />\n                            </div>\n                            <div>\n                                <Button onClick={() => alert(\"It worked!\")}>A sample button</Button>\n                            </div>\n                        </div>\n                    </Flex.Item>\n                </Flex>\n            </Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@2.1.0-preview4","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Yqp69TPrFz+goNFu27A792IpS6o5xceCnvJCq84YvA1i9L2hAIfzZJMG4SD9ZlEPRvLPOQResOX46fBWcaGAYA==","shasum":"1580c362a52ce263d48f8f946a95437dab3cfccf","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.1.0-preview4.tgz","fileCount":6,"unpackedSize":13577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevmyLCRA9TVsSAnZWagAAAyIP/0Z1nQgDB3hF57Nj7Zui\nbArdpzAM7+RT73Q/DfchgY0MhjPRx92x7bLw+u5y9ah8V+ilKBYYt9fPnw52\nD3pnOEYHkfn2MRZDYLQ8FSqmZFS7f8Sb68TC81U3jEQ9BtpDmhGLMkDeBO7L\nZzHFZ58eZjWpANgCe8ZBWQtzsMKOAQ3013Yd+YTbe3SmcVL+Veryds3kQ7+y\nj8cWBOnLC8bZb8uqs4TjZhwB8RhHur4o617lug3s3UJrpOtdAYGvjaGmEc2L\nxbmLyuKd91BjkAqfaxXTmL75F0o5W4eg6EcKh3fYjYGPAVICtm4xOcHcZpPi\nhqB63Gxp//Oqj7QeR08/11zcx3qZyK6SZtuQ9w0HFFQSOIoPXZkSQ5WT7CXc\n/bvtcx3zeOiV0MFcME0KiR4UxnspaAHgcrn3wPoASR6+LwH2MOVIYjXFqlkw\ngz8k+pXWr49pp2AOu7yysFOw9w4jFDqlHcWh95I/CDkGiIuJFH9ShKtKkZlo\n7klMDaWvZU9qrWSR15JYS9tk0+sXHXZJXVW+pULbfBcblrvAr3TEoZP9riam\nXE34Oa730Rw0UcfMzadEN8UNYKavuVIu0adkj3X8xNmON1wwOK48BLXGB+gZ\nvMROT52CIv4gJcWmXfyK0VTzZKBOMMbQEugdXQlaiTa5wVVR53WI6/QolShg\nrmHG\r\n=OCyg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2iuTwdVakymN6WeIW1Ll7bD4UeVImTXUCaLz4+GMXyAIhAIqMlsmvaFN4Ee11b8Km+JEjP2sZTCOyO+ohn1T1uTA8"}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.1.0-preview4_1589537930774_0.8821374836217641"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v2.1.0 or later"},"2.1.0":{"name":"msteams-react-base-component","version":"2.1.0","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"eslint ./src/**/*.tsx"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.49.0","@microsoft/teams-js":"1.6.0","@types/react":"^16.9.34","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^2.28.0","@typescript-eslint/parser":"^2.28.0","eslint":"^7.0.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-standard":"^4.0.1","react":"^16.8.6","react-dom":"^16.8.6","typescript":"^3.9.2"},"dependencies":{},"peerDependencies":{"@fluentui/react-northstar":"^0.49.0","@microsoft/teams-js":"1.6.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"93b26eefac5b77b7549a3f0bb826ec82b610224b","_id":"msteams-react-base-component@2.1.0","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-pGLperMaS2VGQvcnkdaTKIimntV3yUVtK/vODJzYAkqkL0Ex2pLCsvLz29kZR13ofemi5AA2YiOTg3CR/BcV+A==","shasum":"1f6a01afd9560ea5f9c840f437594d22b5f4b9ae","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.1.0.tgz","fileCount":6,"unpackedSize":13546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewU+NCRA9TVsSAnZWagAA/gMQAJOuimTHVpwuJOwirLvb\n9gZvViWuieMXwVUPs6/Nri7I2rIe/aGY0QdgCJTSC//wbdpIDog88thCHQeS\nkCcascLwfelE0Qe+HVS7iSByAPi/RhKHe+kqK5Nw+VW7OHrjDVi/ottRY2ma\n2YtJEqoI0npszaEEsn8SpgXm2vHiTWlzf9ERMM3+GZEIji4cNEclu5uXkmIo\nr0iwYcSCjVQe/htYe1/hLVfB7XYsMCun5fiMARKWdzXKUKr3WNSoG1QL0rfC\nCOh37diQRVGBwCaiq5OrofC3m6eUWYzr+uaOusukPX+RsZHbCJaUjaY10//i\nFueiXpv/5a3q5sIxTzBH9jYBJmr3/gdk+r9n43gevht3AWVZnYCBJPFqRIO7\ns0bQxLZeHa9z5y/d4ml+4MAS6mArtuWEroIETt69GN+ylj1WqvemBtQp3NO0\nWN88koxa6ILXTVGszOFumeWUEoAhqVcN4Xctq2KXXTdcT8ZNLRJukZg5r+Pf\nxInbHqssLrDRJ1osYyz0FiAncxNnY7ZDA8Jmh2C+jKpPj3U49ueX+470n+D6\n97EyUNYJcjHUuis3d4XCz1OYrTdZSzk+6SIXpG1F11vN2l0VczOuemNS+8Ja\nH3b8ewbfMnuUhkGH+/0b9seLUD2LfAkTkP8a/nOdZRFH2JDYc4aLXTntuSb3\n/vXS\r\n=qKka\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAi7C7R+AH6S38aVjp+dn3bNnV7nuwUq/thknF84sb1DAiEA+uKMQYLusiF9brQ4iAKz1m424lAHyieH67X9V7JqfF0="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.1.0_1589727116689_0.32933660236175744"},"_hasShrinkwrap":false},"2.2.0-preview":{"name":"msteams-react-base-component","version":"2.2.0-preview","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"eslint ./src/**/*.tsx"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.7.0","@types/react":"^16.9.34","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^2.28.0","@typescript-eslint/parser":"^2.28.0","eslint":"^7.0.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-standard":"^4.0.1","react":"^16.8.6","react-dom":"^16.8.6","typescript":"^3.9.2"},"dependencies":{},"peerDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"1.7.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"bc1bfac5bbc266570ed6c6a66014b035d9a51a3c","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed) \n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport { Provider, Flex, Text, Button, Header } from \"@fluentui/react\";\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n        return (\n             <Provider theme={this.state.theme}>\n                <Flex fill={true} column styles={{\n                    padding: \".8rem 0 .8rem .5rem\"\n                }}>\n                    <Flex.Item>\n                        <Header content=\"This is your tab\" />\n                    </Flex.Item>\n                    <Flex.Item>\n                        <div>\n                            <div>\n                                <Text content={this.state.entityId} />\n                            </div>\n                            <div>\n                                <Button onClick={() => alert(\"It worked!\")}>A sample button</Button>\n                            </div>\n                        </div>\n                    </Flex.Item>\n                </Flex>\n            </Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@2.2.0-preview","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-fqb3p9WFDzMHaq+8bwk5HtF+wMgraBUeSsd0cHC/XWOl5hg0Gx3pNVdHgXUnDKD0M90pGV7NnsFnLf0jdgnWfw==","shasum":"ee28bea982072f3fbe4a8094a885ca8fdb45b6bd","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.2.0-preview.tgz","fileCount":6,"unpackedSize":13744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfVlqrCRA9TVsSAnZWagAAn94P/jTWlPrIFBRSCYqmpgLd\n69nLL8qw4LSY71GGX/ifeEJMl7fB54KCWsaj17Dm1Pg4r6VZo3LduB+syA0X\nPZvmgYokrUOqEVeqTSM9P/OWFxXtvxgOL2Igh7VUhUDSeNbVB33Y4qEdtskY\noPgt1aAOPv8khre6X35ZWpdgCUXw6lW3HOzuOZNDw5SCi7IUZE9WHI5sMaWH\nyAP41bukMRRhRfJ91XbhmHIaV/PIIin5J3IsHe/jcA4cjPD8EnMo7DCX6Tfo\nt3GHoLV2OBMfhgGZ4ptdIZkWBWGijVScuy72rFuLm6/SFeHh6SUrDwuAjTFr\nR5bT99of3EUih4dyQW/BsU/pfeEf/4/XHiICGJaXAe6g0eOi/28AmwOwEWeT\nARffi8vbJSsC4y5FEl3h7S3wlu+JZvMJaAU5YjeHnz8Tk5Y2yf3JZ30kJgn2\n+qRJsWmCY37hZ/amuVaEzcICpfas6MZIfxNPuwVO6Taw/genCm+rjsnTTrhl\nhsEmwrD3pvJHnAgN0uuIaf0Jl39Y3IeLdVDcYpz4X2zszjusYaqDNVqHMFqq\nkmhy3nEVO8i7HxNqEoWgOr92RByzM6E5e90cQqtWZnwK2Vw6LV42grg2chWQ\n+df1YwQybUzZGnIPJw7N0kiB1lfZOn9PVZ57TAgEBUHOVuwk7Ym/Au+nkanb\nGB1A\r\n=VqNk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDl9amhrak78yL+iG+xrIsbw5GJF9A3f9M6Sx0N5fpHqAiEAoMngyxQy51sU8fGOpG4u1c/M/e4W0XTqeee0bcWsN74="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.2.0-preview_1599494826662_0.08200018142428767"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v2.2.0 or later"},"2.2.0-preview2":{"name":"msteams-react-base-component","version":"2.2.0-preview2","description":"React helper components for Microsoft Teams apps","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p .","clean":"rm -rf lib","lint":"eslint ./src/**/*.tsx"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@types/react":"^16.9.34","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^2.28.0","@typescript-eslint/parser":"^2.28.0","eslint":"^7.0.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-standard":"^4.0.1","react":"^16.8.6","react-dom":"^16.8.6","typescript":"^4.0.3"},"dependencies":{},"peerDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.7.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"fc258b486de4aae3621c380c197bbf7072fbf2f8","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed) \n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport { Provider, Flex, Text, Button, Header } from \"@fluentui/react\";\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n        return (\n             <Provider theme={this.state.theme}>\n                <Flex fill={true} column styles={{\n                    padding: \".8rem 0 .8rem .5rem\"\n                }}>\n                    <Flex.Item>\n                        <Header content=\"This is your tab\" />\n                    </Flex.Item>\n                    <Flex.Item>\n                        <div>\n                            <div>\n                                <Text content={this.state.entityId} />\n                            </div>\n                            <div>\n                                <Button onClick={() => alert(\"It worked!\")}>A sample button</Button>\n                            </div>\n                        </div>\n                    </Flex.Item>\n                </Flex>\n            </Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@2.2.0-preview2","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-ebJ1WHb50EmtFxfncS+FboChpIdW6jivvngLermrxNh6fcipk4SEzsPBmnKBlsuJnDj14b8t2CJsqsEsEIVjFg==","shasum":"d099fc97429a1b2bc41ac81c8f80a2581e86dcf5","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.2.0-preview2.tgz","fileCount":6,"unpackedSize":13781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhbS2CRA9TVsSAnZWagAAaekP/i+SaEOa9KDIUh0OeFuk\nyZ9knbemnZ0PGz8yyff+i6xB8a29jP7vrBppqr0xJnp8e/f9HBCF3Pr+qdYt\nzZAz7OsogaGmiBg+HowiXgedKu3ENhTMqDXQxT685/KsCiabcx6ujPyhdj52\nKZublJeq+45iVRhdR1QD/3vJZilCJTRVxxEUJKLmYUMAKk0rWuri13hBm8/n\nQHD8HzVCU5X2L285gA7p0cVB7Nq9Q1Z+gkLmRaPVqzwwi+xlA9AZMbuGvvJ+\nCqN2c18glSVn3jE1xI9WwVNEWM1OiTvAwsdwrns7bN0SZtlz6cKeKl8JXWIC\nwMfdUN6fdte5i8nAsXHhj3SIEoRBbdN2tH85GuqnwepBXoOvUbUCM2dGycuo\nMHxsazvaue6gTIAvvo2NcpHgeXXP89TR/8LKxm2htMr25Jt+WpfmbToaStXO\nhvWEwsUk4Etv12IL4EHJUj5sE47jo8oVDzDcathv5fPGm9hvoSJPetG3Rg2o\n6ookOjfWE3Nm7vHW4WgedrjFAJBbVTSAdmE4toq4cJrAqKw0IXx48lTq9PGU\nuKvr9v3YKg/UPR3kjeMqODfDd6SRw26gORCfhFzBxDnRuPMtkoAWXLGMJVWM\nmGtixfrfalDfUMOmYfuwrAmysuUbGkoeWWm4P/CfcYTe3vWTagrpWzzjPZZl\nxyDZ\r\n=5Fdb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6kyXdqSXUzghYEFYVOHQDCPfL1dJCIUEdrHZW8h+DeQIhAIvys+QQi0B0+U151Ul9xsRjXl31Xrg5ziVd9QAG993v"}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.2.0-preview2_1602598070142_0.024977351584970497"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v2.2.0 or later"},"2.2.0-preview3":{"name":"msteams-react-base-component","version":"2.2.0-preview3","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","lint":"eslint ./src/**/*.tsx"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@types/react":"^16.9.34","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^2.28.0","@typescript-eslint/parser":"^2.28.0","eslint":"^7.0.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-standard":"^4.0.1","react":"^16.8.6","react-dom":"^16.8.6","typescript":"^4.0.3","rimraf":"^3.0.2"},"dependencies":{},"peerDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.7.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"9a11c204998b1b6ec3a1999b825bac6d3de46511","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed) \n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n [![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=master)](https://travis-ci.org/wictorwilen/msteams-react-base-component)|[![Build Status](https://travis-ci.org/wictorwilen/msteams-react-base-component.svg?branch=preview)](https://travis-ci.org/wictorwilen/msteams-react-base-component)\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from 'react';\nimport { Provider, Flex, Text, Button, Header } from \"@fluentui/react\";\nimport TeamsBaseComponent, { ITeamsBaseComponentProps, ITeamsBaseComponentState } from 'msteams-react-base-component'\nimport * as microsoftTeams from '@microsoft/teams-js';\n\nexport interface IMyTabState extends ITeamsBaseComponentState {\n    property: string;\n}\n\nexport interface IMyTabConfigProps {\n}\n\nexport class MyTab extends TeamsBaseComponent<IMyTapProps, IMyTabState> {\n    public componentWillMount() {\n        this.updateTheme(this.getQueryVariable('theme'));\n        this.setState({\n            fontSize: this.pageFontSize()\n        });\n\n        microsoftTeams.initialize();\n        microsoftTeams.registerOnThemeChangeHandler(this.updateTheme);\n    }\n\n     public render() {\n        return (\n             <Provider theme={this.state.theme}>\n                <Flex fill={true} column styles={{\n                    padding: \".8rem 0 .8rem .5rem\"\n                }}>\n                    <Flex.Item>\n                        <Header content=\"This is your tab\" />\n                    </Flex.Item>\n                    <Flex.Item>\n                        <div>\n                            <div>\n                                <Text content={this.state.entityId} />\n                            </div>\n                            <div>\n                                <Button onClick={() => alert(\"It worked!\")}>A sample button</Button>\n                            </div>\n                        </div>\n                    </Flex.Item>\n                </Flex>\n            </Provider>\n        );\n    }\n}\n\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@2.2.0-preview3","_nodeVersion":"15.0.1","_npmVersion":"7.0.3","dist":{"integrity":"sha512-o4UKAdYqcMd5emhHI0OVDtrUeu5yRKcroCxbboFnq9AbAgdOahB3saE8mkQ5h+O+bgv7ShYvr1ur4gOS5WG/Jw==","shasum":"efdced10d21caba5214a0edae05e03cccb6d351e","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.2.0-preview3.tgz","fileCount":8,"unpackedSize":17530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmCvPCRA9TVsSAnZWagAA1JYP/jip+0HqbBrV7eEoGBVv\n4LbyfHrV8YMleOhkBxJ8+W4kWs6L3m0zUsaMsHjZ6pFzMF062ZragDUIeTo0\nnBgf6vfMFfE99wghnsOIEfZ2NKXDmuuFX3HWMWyv9Dl6f6iXyaHo1BcNjkxR\nO6Wp5d8kBbXJ7HqSySbjTYIBIdbTPpAB/3Bf45GL00+IrDoDgZPQrIbtJZSQ\npJhGk0w1ITI89a5qNYvYHgKuAyckwlNo2X9vakpLFb8GhMLyvrOWzjCiTYn5\nLvwZGdYUx5WWdI9dr4seepUdi3MLMh6/fMI8SiGGTy1sVP4VdG9L6uckq4J6\nxmpUNL3qplolrpf+Q4bFMUrsrH57vmmshUdtcgUc4+yGllRelFLdWdGbmWW/\n+7fli3X4Vs/5F8PVaje/qyDZ/e3SZ3U6LTJAyktulArSQzEHYYU1tzP5mvzP\nitfKy+IXxRfvauBxzjMO/NerivGV21aPbWS0eqZF8RbUP4GBoqm6OGl7B8v1\nkmWeJMDja3UWAzxGG5B6o1J7JNBt5jxrrf5qIxMOGcAUPUb3kNyANgJ5Yg0a\n6FKAzgKEckhxbeh41cG7YUSiyAhWoRi8GZHRJikxwx63oWVoKqYHaTMES8gr\nTdkIK2OrXhbCctrqmKJxyvdhuJaWQVCOIGcecZwrxf7b7KvpwcDgEx8h7jg5\nB5nr\r\n=vl4b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDT9tDReyYoiijtXyEEUlkFJGlJZ6OT9E3e4t9TB5DTlAIgbJL2XB1IsxFT+G+4BE27nNgH4i9weQnnDMD9gewjvGg="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.2.0-preview3_1603808206830_0.06010733606296359"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v2.2.0 or later"},"2.2.0":{"name":"msteams-react-base-component","version":"2.2.0","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","lint":"eslint ./src/**/*.tsx"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@types/react":"^16.9.34","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^2.28.0","@typescript-eslint/parser":"^2.28.0","eslint":"^7.0.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-standard":"^4.0.1","react":"^16.8.6","react-dom":"^16.8.6","typescript":"^4.0.3","rimraf":"^3.0.2"},"dependencies":{},"peerDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"e4ea8077d99d291d10c47677009b874604c9c288","_id":"msteams-react-base-component@2.2.0","_nodeVersion":"15.0.1","_npmVersion":"7.0.3","dist":{"integrity":"sha512-lI9WDtPlyDf8XYdIlu1oRsNWUCB7U+NrJxKk+K942G4sBSemnY2XSPG3PghBVZJpi3YT1K87OSdoIFu6BIqJsQ==","shasum":"03bcd75a3d2b2d24c7603deac88ca2958a76415a","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-2.2.0.tgz","fileCount":8,"unpackedSize":17544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmLtvCRA9TVsSAnZWagAAElwP/A6DLE4NjbCKuqOOhYrd\n9Cc9uRBlCIEyU9kcBjPNNv/UdBmaFbMtm6f8iQdithPNWGCcfowoikALk0kh\n1G91/1DlfkwcTIyfuHACBIMlp0gSYbkoe+tf8SjzY8751Z9uYCaPjcb1S4sL\nYZP/lO5N+l8Wv67SKS6PeNjtJi72VA+vttuCn6Rx35ox59TTUjBUWtsoKBlX\nB5kvEzyodvwp1dDYNZOVwEaXdfuJIJ9hyl+KMTXu49hFdrBaqwVZZPADS0Cl\noHXvlHLofTEKLul3yINUpqnHbR9wD2Qw5ZJNj0HlXQYZj3zrY4iplNoOE1f6\nZRLCrI9Q/gcKRzCIB9XYmNy8TPen/U9/G+adAqiZmUMBcaMVa9uJSKwsD38r\nT+JYXjR3deEuiH3X8LTgapOkmeTwxGCxUslaBrHFB2gZJHWBfhPB1MkCYUSk\nN3qkM2dqm/muWgBwk18Tz0IcwbrthOQ9n+ix6H6NPSYSuqeP724GC6hEro1/\nkB1ij2Ch1EWr/RIiJjLmfPLQqQ4uiwIl9Y0G03HOpmbqjZcTCrXfPYawMPX4\noB3Dt6rFschbSnfa5uR/GA0BRjGjnTe6DwKcGoVZzSh4CcTObPAtMzLFywQE\n1D8EpIaZzXVzw/9kkGiSHpggV6CMxh4GIFD32ijGCTOFXHm5yE2HCZr7CL1A\nCAO6\r\n=Q8C3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAYR9cJQzQIfZ3ZURWzZOF+KcCu+CTEE20C0dhJ5W16qAiBKHRXxDbwM0/uW70/br7i7lxSlQW7hQsPP2IEYulX13Q=="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_2.2.0_1603844974396_0.9199943811327016"},"_hasShrinkwrap":false},"3.0.0-preview":{"name":"msteams-react-base-component","version":"3.0.0-preview","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.7.0","@typescript-eslint/parser":"^4.7.0","eslint":"^7.13.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-standard":"^4.1.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"4871db11510c712981bf87cc919eb79d84fe0146","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis is a React hook based on the Microsoft Teams JavaScript SDK and the Fluent UI components, which is used when generating Microsoft Teams Apps using the [Microsoft Teams Yeoman Generator](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n## Usage\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@3.0.0-preview","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-TOCrsetkeAc17TIjJCiXpORg9sdh+TC3CTwLnXsJe6BNH7AmqqHyN0L83i99Bqz0ZDt0mlBI+BJE/+gd2ZFd1g==","shasum":"60a218180e81879c4bb40eeac9083b26ea3f4534","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-3.0.0-preview.tgz","fileCount":10,"unpackedSize":16100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs8VpCRA9TVsSAnZWagAAshwP/j0isT5+Mw2L982+SeGO\nKsOOkWevkUpP4r6GUXgW7UjVsEO9qAS5qIxh1xYAk+pRU3KUgdOL6RneKii7\nqMbrPvbuybaZd+XX+le9gd/yKLueq7uIWPS8ccEyQV3OcapKVMNVzxQukATb\nMDSr986bFP+dvliNfKdJNgTSqNYmH3VaS1xCs4mQEJKtQVFlAIAOTlHRAFOm\niy7I9JbUIFQHFclk9Y+6mdcixX6aK9QmkqJVIFus2hlfSVI2PcUXaV5yNujG\nyBy6vMdXL3x0SLuUzxqcTS5baWPiLR6CgYBWDMAI+pX6ktp551AIeN179aZj\nEZoVMD5qWCl+++XGvKKCdUOrOurAY/WtCEis8rlcBXserYpNH9dg3DL9qDRJ\nREcbAfpwB4OBG/cGVrDKNBWl0pLxVC6/ht58EbR/+4qso2dbVgrzwO9camFR\nVW+nj5na+v6QxXkNm3kIarfu0MZj7pHYMNOlSJxUTrYDuTIk7CVO9Fe6oE/b\nCAa3Vn+7P8S0lQ3Ih5WAE1M7ddkKWrIDxuAckEg3pmkcL+sdngcWcwVCZd68\nfbXzuCyB2ZhH/4or0kA9PIhC3BY6urt1OxL68Jo7xLzCOoc3XGs0DslPYhGr\nLgM+avR0lByxpNhsHx1diOoWnzdO6kXIddv3hhO9dOil5m9zLYtMiUkcwqZ0\n094G\r\n=vcK2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN2zLTLA63srcPV241yd2k+9juA3YyopHrrRe+wxO94gIhAMG9wdrBoAU5MfmBFQ93dlmyYX9SBFyuKrSOsRkUszSP"}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_3.0.0-preview_1605617001231_0.37914558755673067"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v3.1.0 or later"},"3.0.0-preview2":{"name":"msteams-react-base-component","version":"3.0.0-preview2","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.7.0","@typescript-eslint/parser":"^4.7.0","eslint":"^7.13.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-standard":"^4.1.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"8d25635cf6e1c68ab4606624ed1c42db4e3a8c6b","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis is a React hook based on the Microsoft Teams JavaScript SDK and the Fluent UI components, which is used when generating Microsoft Teams Apps using the [Microsoft Teams Yeoman Generator](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n## Usage\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically call `microsoftTeams.initialize()` and ` microsoftTeams.getContext()` if the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@3.0.0-preview2","_nodeVersion":"14.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-RLDp7+yWLAXC2LaXvwFnrdTNs/KK3zjXylBdm0vYcDhTZXskBmER4q8xstblM9BTy+c2urnU3gXlY6wi0P36gQ==","shasum":"3a1a5a84f6c0f05c77679624844be1945ae40e39","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-3.0.0-preview2.tgz","fileCount":10,"unpackedSize":18991,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvTdMCRA9TVsSAnZWagAAubEP/iQ50mQHLxb8NB1hDfuX\nk9DWfrFhtATG/bfT3g04jQF7l3vMOV/AQqZ70zUHRNYRUp45Kee3Wt5W1elQ\n9EFEDGuZbyPpjbYdG7p3k87ZEz77Mad08H+XrV2MxjbJ7hkoS9dTO6COoSKW\nIUOHikG7QacjcaNYB9CKP0/Nl4qXBabcQsIhtcsK1kl9OM1AC3+iI0R8DOnB\nsbdmj/IDGObZSBichFP8KG13RWO8X8SN7cMP1RP8VezZIlJcQe4YApLMYZPA\nOu5vyIC+zakj6Qkkthci7bmNRbDUvW5ABi32lAfMB0y8Q/1larKpQlHRsbVN\nUDY/ADDNJUsI0/3vBMIfayDQkK1jKgr8qApd1NagxKQsO2RTKtL7AsFC9fON\n8yipWY46uGsYSIwjb1amYeSazrq+rBvw4+fgGO3eoCq3ixQ4G4FUjwC0foPw\nQEB0565Mj4ahN6m2hHjXx2R/KcBga9sSk2oiQAEpsbKLw5BUtDbU/g/3t4Fr\n4WIS1cgiIM5k6awWFQ0+LylZPOdkkRKIk9b3RdyXJHrIeQviKQYa0uPxl1qn\nUo2d94ldXc2rypee66rxW3vaFBMXzjWYcO/3qFci2Rzf280wUwrH44CgUdiB\nA/2K5zdqRKZ48galZPUIBQg5LiOd2IS6axVB5M7IMM2vF3xSM0s8SxjbOfLv\niaiU\r\n=owUg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnddZSKa6UDs6MxA9ON6/+GU7QqlOcyxyp7kKY2QF2oQIgWyElcrUSQ2t9U4HBF+RYPV6dYcqyikfxS923yFuoXY8="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_3.0.0-preview2_1606235980113_0.6055874638697096"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v3.1.0 or later"},"3.0.0":{"name":"msteams-react-base-component","version":"3.0.0","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.7.0","@typescript-eslint/parser":"^4.7.0","eslint":"^7.13.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-standard":"^4.1.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"3a4f3c076a8092864d050376edfb76d9a19ad1f2","_id":"msteams-react-base-component@3.0.0","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-hzvBtf5hC/SRA/ZjLqf7BfbM+PY+9LW+Gky/1CoBij+Zj4q0ZRaplo9Cen6MVwpjmDWQ0Q3L4yxNl+Dpg72RPA==","shasum":"475901f1aec4a8f45a7d28af70562f44ac917d95","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-3.0.0.tgz","fileCount":10,"unpackedSize":19963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzPvrCRA9TVsSAnZWagAARaoP/01LgyqFbuJu8oq8Q1BB\nCW11+J///aBBvtdBOF4MLwzhIR7KDp7gON1/x/Bb2riiHRauQzA6zKiAKhTP\niDKrc1Ep7k8btG7lIqRX28ac52VxWGnlEntmUG9/kgttlO2p7JJd2vNZs74J\n9sSw7pNdqoMTntcpuBKVi2hsRoLMb9ykwCyMPibUmVQVpu9+GOoIYAj/zRhL\ndk7TmTbb4yOsQmpm+QwZQtELtR+Yo5J9H46CF4/xSfsRob67e3lY243m3VDC\nTjApakg+RUtmUw4chGDRypCiU6akPYwS2OmIaPSfu743Eg8XCvrrvRXwvuFx\nSWKTTbPxxN+IPVGnWP6W0qQChHjez8tIofClrnZEkPWwYBZts1x4Nm50zKXE\nIbTnrLcRlmcOAvsEG7dWZU6vtE7B/FFMw46QLzAOlo1Sh02uis1m2q/8xttW\norGOcDaIvNb2I0FtWZ9+1VX3Uq2QkXDEl3IPHhQUxO8c/GoPX2ZZv/KhUVQ5\nLCn7o9KwYKtsZNu5r9UJP94V+h/rgHSOpAfdUOXreI8YwaQYXyZDUnGXYF/b\nWxeUsOiP2rfeSBh/0hPQVdgPfpjDX7o6VnEC0m3oOwPbSsNV+h0ZnYxffXcL\nbQRe37igEH8RmmQaXyMNb73PDTG2JPbx9EKWFSdLAVF32/nsOSMQ3M/8GmZi\nj76J\r\n=O3r0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSwLxdYw8kKG8B49sKrqJU7r1ejdZiDIIYvGr47gyduwIhAPQc7u5y7Q5Hmuq7UMsFv/eeEqxc9BnTioL+ODguOxkv"}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_3.0.0_1607269355284_0.5784561903662697"},"_hasShrinkwrap":false},"3.0.1-preview":{"name":"msteams-react-base-component","version":"3.0.1-preview","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.7.0","@typescript-eslint/parser":"^4.7.0","eslint":"^7.13.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-standard":"^4.1.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"gitHead":"e3378ca334241f78aabebf8484269a8635bb8c5d","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis is a React hook based on the Microsoft Teams JavaScript SDK and the Fluent UI components, which is used when generating Microsoft Teams Apps using the [Microsoft Teams Yeoman Generator](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n## Usage\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically call `microsoftTeams.initialize()` and ` microsoftTeams.getContext()` if the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n### Additional helper methods\n\nThe package also exports two helper methods, both used internally by the `useTeams` hook.\n\n`getQueryVariable(name: string): string` - returns the value of the query string variable identified by the name.\n\n`checkInTeams(): boolean` - returns true if hosted inside Microsoft Teams.\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@3.0.1-preview","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-ILUSd37CVmq56pfeTw6exInV5q7seWsMCk1YIopnO6VTDr+njsdW59bmELepQjMgO5P2Whezs8HopsAj++yAxA==","shasum":"f32f0d88ac58382425c6a88799a4be2b514c149d","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-3.0.1-preview.tgz","fileCount":10,"unpackedSize":20683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0zBUCRA9TVsSAnZWagAAAzYP/3tuOA1qrnt35DHV9xP2\n8WNNcFSe4S2zSw14gYxdg4odwYZyGqbESvjnLmL8YHAq2P0i2TzpWs3nD1N2\n7I5BHCNFrr5u6rMszvVIdKziiTU/R5OD8RVwm3zgamLtfMWWvr/mkLpnneLZ\no4W++m5GY/AnXzdDy5Y/BY/FFeEpaZYZ0exR/Rhq+1TICz07Tl/qY2UZa0OV\noYtGYJgWbWGWlmQQPMsmy7kbO6CjrcnW1WVqIs3QtZueZP59egrmtJMdpvRS\n8TtTFcDIpy5Nfo9Z8FZ7n51n7K/xgbVPTIc6uLP61hEJjIoIF83O+wg4VpdF\n/eOAr0Y691ipmoaQVuHflZRV31F2EJI8FPZ1dDtqkRAdTDD6vo7nfCGXpQ5Y\nlVbQRyhpOuU4AkkHitq4Vr6lpWznhbc6+8ZNlZbqCdKq76vye+27HbTeGvkJ\n88kSqSCguHYz2KtFdg21D0vB8+0BYfAq1iy8czpo+gPwKvAl5FsCurvQ/eq2\nZqGd+7+QwjfU3scg2UbQgtrDvrbVphhbo+0qoFTsMQLfpw4UtByEbjkOhScl\n0XPsGIj9aHgb0GdafDOc0aHY9A73GvSAaqQMDtR27UBZ5+M+YtYgVS4qTLuZ\n1DL/mD3G9/22QebE86fvOxVoYwz6tPcliLQ0k/hxkswPqjHct0Knu9VIuS7D\n45ug\r\n=4MR1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYoP81+GRYBEEZ4UZwhuMcuxTCquJOzS/aY5bOavqeugIhAKu/3/tOL0qVWCaH4JdLUasjT5TV2TRP3DVgPOi//ym+"}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_3.0.1-preview_1607675988024_0.41135756569385595"},"_hasShrinkwrap":false,"deprecated":"This is a preview version. Recommended to upgrade to v3.1.0 or later"},"3.0.1":{"name":"msteams-react-base-component","version":"3.0.1","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.7.0","@typescript-eslint/parser":"^4.7.0","eslint":"^7.13.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-standard":"^4.1.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"412d078ba4f03ffa4c17a5309dbd33e11671672d","_id":"msteams-react-base-component@3.0.1","_nodeVersion":"14.15.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-o0ckWhaNRyF+bvuKBjthTsfs3TukTZ45iMZV41l5MT28NTkdsT6YBdIexgTLEH5Ug1TkrbXUJ1ZLTaHiROAhFg==","shasum":"55ed41870e9d4077a05196d17cb1e0093e8d4150","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-3.0.1.tgz","fileCount":10,"unpackedSize":20800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf3KKWCRA9TVsSAnZWagAAN38P/2x3+4R+I1PYusVy9oa/\npLtNgU3nSq17G2aeXtIt+ZZVAWgfRkFoh4OAatByCVwzS0Vyl2wf0rz7WiLS\nn8aVrJHN0kC5kK4EqJtge9KhQUCOu4liXflJnG7uytXaiK9tVdwVkbtRto9q\nwlNFh0rtLP+p4uGyFotKyG0TVxiLPWiw2SlwZfmOwQ+syZFmoJ/jgozL7fbV\n+1c+PxeawsSmq59SGqffr0nybojofd/Ymqp6R1Aka3Dpe3TJX0p2OnCoIw7F\nkGSODrvRxRbzi29xRmfWYw2xPObykfL9/WYU8eSzNIqleKgKKiLTiHzZFCMm\nhG3r/J8sMxJbQ4nO3NUfpoiqHolrRk4fJ5fjLu5I77f89YJ4zyeAIBp6lbBv\nrTaTicsiXA8rrAYEVSpm4Knqe6bXYvoabcMeiYi6mwbmmnMEyrsOmGPxuvZa\nC2h8M0k8xoqbVUofPqHT2X1J+rB4Nzsl4+qoMPVaJT0c35TtL5i+/2iBEgk7\nC34PupnW5IxWiJ538TZaW/x7lGbRCM/oJzks2KqdjrMw3jUwQQKVNWKfPr4m\noHaPBxERb4hOmqhWaZ0xlhDEBxDBUIxGhtudW6AP7OoVRBin0IIgDEV75TV7\nr1rkIbc+Wz6beeEMEo4p5aa4ExnYGxygtUab1CymIw44SxF9Kectzn1WGbs+\ndvMg\r\n=sL80\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBD5pHS1ExisF3OrqhQFlTp/+r2pTfQAVaIEmHfvAxfmAiEA6TNB90rBdb0odPKk9Xh7a8UqD6yTOyfYrXmh9NvFNQI="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_3.0.1_1608295062010_0.9323600856163856"},"_hasShrinkwrap":false},"3.0.2":{"name":"msteams-react-base-component","version":"3.0.2","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.7.0","@typescript-eslint/parser":"^4.7.0","eslint":"^7.13.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-standard":"^4.1.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","typescript":"^4.0.3"},"peerDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"ad6d11b885b927e8b3eae9bd0e927dd86d0d57c5","_id":"msteams-react-base-component@3.0.2","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-nUKRh51rHKwSQKL1DjqMWszPDNpyVdiueShoh/IeypRg1YmlRBw67Kr4A12HQP+d3IKJUvHImrzL1DQN2XOzuA==","shasum":"99b0c4f49aa9bc9179930d6816ed92476845ece1","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-3.0.2.tgz","fileCount":10,"unpackedSize":21044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgE8dCCRA9TVsSAnZWagAAy2sP/io0S5oZxvFTVP30VEuG\nLptof9OIFDgbUDz3ATmg728ndbl960iPA72VGgSmKZjLByCUa4yoNEBO07pB\n8ebuF/BepxXv96VNT7RhKTph+qEJOI3uawCMT9SL72oP90VIHauclXxulIUk\nkkA3aAoOtkmWpfq7gTznQUTKlSr8wKCbW989aDY9KyqORMoKwI8FQNfaBukm\n9I/ucS1WhN0V/VBPRfT/2DU1maL4aXpP/SAX5vKR1o3Rv9IaFbvyGCoiDHC7\nESexhc04yIYQ3UiOxH85hFQXh41rBHzvipq5ZTfT/w8aB6Qn8iLhlPq1MvyI\neY8Pt1C/BHB/7jW2oivd39xZjiB51395Unw2o/MvH+mbTUVs1ycDOnXcCO+/\nkat1vZuKTIMRL4uV4JthKIPLzFNAz8SISCK6+ulItCjpm7WAS8qauZdmrZof\nlNhQihL+9vjfCD68Dvy5tuKIpoZRn7XgJRDND8A+G0MoAeTmYNjXFJWiLdkM\nOvOWL2BXfmDAhrlyKmqKe5eH/B++EtD+CVwFxdHQ8pFsXX68gu8iYBMUheP/\nyIqB6bg0vJ8rXgDOphpNxS4wTshx0MPAhF2GKVDDGdQF15i6/Jr3xBSDUt00\njPEhNeF36LSHtMx/9M9urUbEJR38LOlir5SegLb92J5TPNcHuEhfuF7/SVP+\noHKp\r\n=Egdp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFO3//mektAnB4164DfhOwfuhJWUr34turRdnfU/eKSgIhAPB9Tp5UUloQF7le3ef6wsFD2xye95FlZI6Bl5K1rtDX"}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_3.0.2_1611908929539_0.9213642396294521"},"_hasShrinkwrap":false},"3.1.0":{"name":"msteams-react-base-component","version":"3.1.0","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@testing-library/react":"^11.2.5","@types/enzyme":"^3.10.8","@types/jest":"^26.0.20","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.7.0","@typescript-eslint/parser":"^4.7.0","eslint":"^7.13.0","eslint-config-standard":"^14.1.1","eslint-plugin-import":"^2.20.2","eslint-plugin-jest":"^24.1.5","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.19.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-standard":"^4.1.0","jest":"^26.6.3","jest-junit":"^12.0.0","mocha":"^8.3.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","ts-jest":"^26.5.2","typescript":"^4.0.3"},"peerDependencies":{"@fluentui/react-northstar":">0.51.0","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"a7031ea2fe54c84c98f57899ad622b62cc13e63d","_id":"msteams-react-base-component@3.1.0","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-o3+xm5leg837suh4SbEMTUttB94EC6K7W4NnwcolW1oHUzJ/DY3ygsX7Uhjhc3GkrR5F+CU1tE23cO/9xpfIwA==","shasum":"197556a0c3d3178aa5fb46948510091dc2d7b28c","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-3.1.0.tgz","fileCount":12,"unpackedSize":22046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPSa0CRA9TVsSAnZWagAAbncP+waomufITacM9ydrvscA\nDd7zY4zZUpn9coa3p51dch88utlg1REjiShh1ewE+7nY4D7wE7D2YPz2uVOs\nR/MMIjieAj0TfJtHoKS15072Pnz+51kI8IvnLJTww9csY/e6XbgFhhB3nM4h\nnpd1o6OzFwyHkaotmT6iU3AiDNaEK+84ny6rCgMWEE1E3gjSZvlKdYp1M/Dd\nERdNt/xaDr1TH6gyxMmtdCcrJpeUS0QPqrIvFiofKqEkXcMMN98OT8zOXzcJ\nSgmQeo3wntH16oeC4tCeduCkVtYlJ8jupyQnUhKPd2Ix0j/kdL4QJS7K5eqP\nCvPCyajeMx2ah6VwtVh4k0hdi7JehHVNnNP5KV0UVFouRtHaFZ9j7wgKH/a4\nIYAdQmQ3evGOnZmB28pOVi6+5I9E3qI5ZUUSoo7m3U141XT9wB307UczjsYg\nI2QXdMC//kmSbWOqT+VbcV0nY7ryjsVfxaF32Rby9wKS5YtcaGaOqrhXUIo9\n0gZ3sm4SHZuBDuZvk+b+3AtinBrB1DMvaiawd/H+Q50ddgz0co33h3PdW8HT\nVdpFHNCy3aI2hGJflWo17h5NoJpfAHsyi3L4zw3al8qoaF+vLztymIHyjiRp\nhKKvbNqOEMVFXZKCIibtyq6fmOqRWmXP08lo5fBXzqGc0b56wUssSqfwB87n\nDrSM\r\n=dmFN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7jlMmjnd3B+vQCLgDdVbEx55aoCaYtL2jOHuOFM3tcAiBNY14ck9Fu9XgF4TIP/KfLMTP4StmfgE6GgFadLPn8dg=="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_3.1.0_1614620337503_0.03153063917616916"},"_hasShrinkwrap":false},"3.1.1-preview":{"name":"msteams-react-base-component","version":"3.1.1-preview","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.9","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.32.0","@typescript-eslint/parser":"^4.32.0","eslint":"^7.32.0","eslint-config-standard":"^16.0.3","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^24.4.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^5.1.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-standard":"^5.0.0","jest":"^27.2.3","jest-junit":"^12.3.0","mocha":"^9.1.2","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","ts-jest":"^27.0.5","typescript":"^4.4.3"},"peerDependencies":{"@fluentui/react-northstar":">0.51.0","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"e370a75fe193a8a5dd234a5d5df3e2c0b8e2176c","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis is a React hook based on the Microsoft Teams JavaScript SDK and the Fluent UI components, which is used when generating Microsoft Teams Apps using the [Microsoft Teams Yeoman Generator](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n## Usage\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically call `microsoftTeams.initialize()` and `microsoftTeams.getContext()` if the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n### Additional helper methods\n\nThe package also exports two helper methods, both used internally by the `useTeams` hook.\n\n`getQueryVariable(name: string): string` - returns the value of the query string variable identified by the name.\n\n`checkInTeams(): boolean` - returns true if hosted inside Microsoft Teams.\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@3.1.1-preview","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-iDszUhJ4m0eLnjrxhA7ThyGqAIMffjYPixic8362r14rUArLSBlhVmXIQ/uYeQAQtcaNv1GZZzcoHh9uYfg2qw==","shasum":"b7d4627f45ac43df49390d1764861b6bf13198bd","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-3.1.1-preview.tgz","fileCount":12,"unpackedSize":22322,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDXIYZRCCnKzADW4TetXrkDhmWikvejrn7KOIKvaI0rUAiEAkmot/Cxmnwzp4yT9WHl7HKllWzK9gtLJe6L1nOG5jkA="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_3.1.1-preview_1632830891414_0.3501699996479788"},"_hasShrinkwrap":false},"3.1.1":{"name":"msteams-react-base-component","version":"3.1.1","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^1.8.0","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.9","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.32.0","@typescript-eslint/parser":"^4.32.0","eslint":"^7.32.0","eslint-config-standard":"^16.0.3","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^24.4.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^5.1.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","eslint-plugin-standard":"^5.0.0","jest":"^27.2.3","jest-junit":"^12.3.0","mocha":"^9.1.2","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","ts-jest":"^27.0.5","typescript":"^4.4.3"},"peerDependencies":{"@fluentui/react-northstar":">0.51.0","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"c3d941e3467365c23d8e8f4f2c067c4b0eb6a032","_id":"msteams-react-base-component@3.1.1","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-5whf5iJQ4cgXMaFUmsEt2n69qT0Ua0Lyl1rabGfDmtBmMUAqT2uXFMSDSvSfEvL3sj1jyNd/s/POR8Yh19rCHA==","shasum":"9b93abfd9c49d0bdfa657471d33ad0c5d43dd3e2","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-3.1.1.tgz","fileCount":12,"unpackedSize":22504,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbuzv/ko+aM2dm7MdmyvI8huvsjvql7d/dfhhXMli8RAIhANNAWSUyBeHHKqiPu8I/wAO3yVIsYVZXQhsJIkCM2I4f"}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_3.1.1_1632985262063_0.6155233813256116"},"_hasShrinkwrap":false},"4.0.0-preview":{"name":"msteams-react-base-component","version":"4.0.0-preview","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^2.0.0-beta.0","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.32.0","@typescript-eslint/parser":"^4.32.0","eslint":"^7.32.0","eslint-config-standard":"^16.0.3","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^24.4.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^5.1.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^27.2.3","jest-junit":"^12.3.0","mocha":"^9.1.2","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","ts-jest":"^27.0.5","typescript":"^4.4.3"},"peerDependencies":{"@fluentui/react-northstar":">0.51.0","@microsoft/teams-js":"^2.0.0-beta.0","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"fac6a9a3534e14dd9602b073e39148a636d6a303","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis is a React hook based on the Microsoft Teams JavaScript SDK and the Fluent UI components, which is used when generating Microsoft Teams Apps using the [Microsoft Teams Yeoman Generator](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n## Usage\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically call `microsoftTeams.initialize()` and `microsoftTeams.getContext()` if the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n### Additional helper methods\n\nThe package also exports two helper methods, both used internally by the `useTeams` hook.\n\n`getQueryVariable(name: string): string` - returns the value of the query string variable identified by the name.\n\n`checkInTeams(): boolean` - returns true if hosted inside Microsoft Teams.\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@4.0.0-preview","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Nx0JyPSWptpDDepPBmQAD5XinBdfpy4fiUKfqvpbr/50p0zIFZAnkaZzGS99lwRy3Hayc9dWOZcmSu+NKMiqSw==","shasum":"750e380f845f6c3e42d1fd1d0247b43d40c7dc3e","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-4.0.0-preview.tgz","fileCount":12,"unpackedSize":21907,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAItTrNuK5TTHmgjqYVW42PxdrPikvDbUEff2jRZM/OVAiEA7x+5JnBxvdJOnt63XQOkVyCLVnA92i1hxbrrOajyCNQ="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_4.0.0-preview_1636655056959_0.020758244245325352"},"_hasShrinkwrap":false},"4.0.0-preview2":{"name":"msteams-react-base-component","version":"4.0.0-preview2","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^2.0.0-beta.1","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.32.0","@typescript-eslint/parser":"^4.32.0","eslint":"^7.32.0","eslint-config-standard":"^16.0.3","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^24.4.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^5.1.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^27.2.3","jest-junit":"^12.3.0","mocha":"^9.1.2","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","ts-jest":"^27.0.5","typescript":"^4.4.3"},"peerDependencies":{"@fluentui/react-northstar":">0.51.0","@microsoft/teams-js":"^2.0.0-beta.1","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"bd9ae868fc7cbc75c24643e307bcec0d2fa2afc1","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis is a React hook based on the Microsoft Teams JavaScript SDK and the Fluent UI components, which is used when generating Microsoft Teams Apps using the [Microsoft Teams Yeoman Generator](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n## Usage\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically call `microsoftTeams.initialize()` and `microsoftTeams.getContext()` if the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n### Additional helper methods\n\nThe package also exports two helper methods, both used internally by the `useTeams` hook.\n\n`getQueryVariable(name: string): string` - returns the value of the query string variable identified by the name.\n\n`checkInTeams(): boolean` - returns true if hosted inside Microsoft Teams.\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@4.0.0-preview2","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-X3du5dQ5Yb/6wrWv+Yg0UM/wB11AvtUyYLKs9Tvp6y3xHZRslPDjH3w2GtcWww7X6dB49vq4/I8i5urCiB5Uuw==","shasum":"f2322256df04e5333388e1f6e0a025908de607c9","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-4.0.0-preview2.tgz","fileCount":12,"unpackedSize":21908,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFrRSMddxzJU+HUAZkHqJQOZg2RlcTPuFSCiffPrRTsfAiARgp3u3YSos2+I0jWFUOzYe88s4svJLyAlAt4FKw2rpA=="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_4.0.0-preview2_1636962150714_0.1321340478421662"},"_hasShrinkwrap":false},"4.0.0-preview3":{"name":"msteams-react-base-component","version":"4.0.0-preview3","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^2.0.0-beta.1","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.32.0","@typescript-eslint/parser":"^4.32.0","eslint":"^7.32.0","eslint-config-standard":"^16.0.3","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^24.4.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^5.1.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^27.2.3","jest-junit":"^13.0.0","mocha":"^9.1.2","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","ts-jest":"^27.0.5","typescript":"^4.4.3"},"peerDependencies":{"@fluentui/react-northstar":">0.51.0","@microsoft/teams-js":"^2.0.0-beta.1","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"42c6f5c62bc07a774e98e80cb2eea5cac3092f52","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis is a React hook based on the Microsoft Teams JavaScript SDK and the Fluent UI components, which is used when generating Microsoft Teams Apps using the [Microsoft Teams Yeoman Generator](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n## Usage\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically call `microsoftTeams.initialize()` and `microsoftTeams.getContext()` if the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n### Additional helper methods\n\nThe package also exports two helper methods, both used internally by the `useTeams` hook.\n\n`getQueryVariable(name: string): string` - returns the value of the query string variable identified by the name.\n\n`checkInTeams(): boolean` - returns true if hosted inside Microsoft Teams.\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@4.0.0-preview3","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-bq2yFbuAamNn3z419HMUdRqx0pb48oEGHpee9DKUNHvC2nh5hpbFLYfHgS28JhlUsgI+fZnvbvpmpXI8mBH7UA==","shasum":"407ff8e98b802117964a2270fdccfb6e120f898e","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-4.0.0-preview3.tgz","fileCount":12,"unpackedSize":21472,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOTS4pDRl35rlrVxySENEH13re/86uGKxwGNVNaGdshwIhANWI91/3Px3+9Om6ZEsAv9nsc063q+1TZCsjh38Rw7cb"}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_4.0.0-preview3_1636983077329_0.5570118464201428"},"_hasShrinkwrap":false},"4.0.0-preview4":{"name":"msteams-react-base-component","version":"4.0.0-preview4","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^2.0.0-beta.1","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.32.0","@typescript-eslint/parser":"^4.32.0","eslint":"^7.32.0","eslint-config-standard":"^16.0.3","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^24.4.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^5.1.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^27.2.3","jest-junit":"^13.0.0","mocha":"^9.1.2","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","ts-jest":"^27.0.5","typescript":"^4.4.3"},"peerDependencies":{"@fluentui/react-northstar":">0.51.0","@microsoft/teams-js":"^2.0.0-beta.1","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"bf64e5c7658264d712a4210f9d0ed68f522b3649","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis is a React hook based on the Microsoft Teams JavaScript SDK and the Fluent UI components, which is used when generating Microsoft Teams Apps using the [Microsoft Teams Yeoman Generator](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n## Usage\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically call `app.initialize()` and `app.getContext()` if the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `context` | `app.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 |\n| `host` | `app.AppHostInfo?` | `undefined` until context is loaded then a shortcut to the host info (`context.app.host`) |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n### Additional helper methods\n\nThe package also exports two helper methods, both used internally by the `useTeams` hook.\n\n`getQueryVariable(name: string): string` - returns the value of the query string variable identified by the name.\n\n`checkInTeams(): boolean` - returns true if hosted inside Microsoft Teams. **Deprecated**\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@4.0.0-preview4","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-rc2vBZor2b8LIq1wzeGD3D4jjgIUG0i5PEC+cJSgZJ4PhWingQqmfzRDWrlFuEK49jwxSefYRk5FScsKDcGxfQ==","shasum":"76f3d1210492a9277e6b4c7c2a5d2e1a1255f611","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-4.0.0-preview4.tgz","fileCount":10,"unpackedSize":22977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk7DYCRA9TVsSAnZWagAAn04QAI7osK4MBNN3rdcG5L8L\nLE9h+ydzGhvPA+Hv2qgPwOnqo2By/8wsYLkupLEzKQ9ghB3g1Tx0zZj+f0hb\n0MUvQoNNNqbHBvjR1kBAkp2bkNPOBMRKjjiGag5DpTL8gLoJJaRAII8/zPYx\n892BC8caiVDnW0na4v5HVdI3WbLYk4y3ZsxeDsdLvYzLVj14yn7rfDn5GVwc\nvKa/5teTZ4ILO1GpPqAlBP9a063+sWHtL1OqmKud5SlVHoEzyrKYKwizJnq8\nxlxRPAoFGohIgUZEXp1IaxSyHEK7aENQGYykhoENNUUvGVpoDPciM0XIznnf\nhoNbro01Qtxym37CzLBfYsHPq/3p2DN9+0rfYOD0gSPD4mfI1ArRGv3LFipy\n5+poKGdLaSpZrCebEOW25On/PSd+0Gec3RCZsJ3Sb2rFHXj9PJOrq44vH5TI\nDln+mxf7tNnoVKLMWmmtoimQP3931lDiQhYMb39jC8G2msblnFLwnVkH3x8O\nHayLLsqN3VVzYUf/6Lns6L1VnGba7xvtCq1rbrdEL1p6GX+rXEcrle/FmcqM\nai41SIuCLA2t9qUmmt5V3OP/b0l2vgD5NfVRlrfBFy0rNcXx9n7qauGWRL0U\nfgYywztXbaeVbVDVQLHScQpvVJiANRbTK2gV+MR2jJaMNhJ6FVbytPNCSdob\nAu1b\r\n=+LV9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGrZsf67fLHdNA2b1HQBZIoZJrumusbgd/An0SDD4T/gIhALvsqYC/Ee8/miARYxDT41g7EDjIxIQ0Dovr9moaEc19"}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_4.0.0-preview4_1637069016025_0.20856439338324062"},"_hasShrinkwrap":false},"4.0.0-preview5":{"name":"msteams-react-base-component","version":"4.0.0-preview5","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/teams-js":"^2.0.0-beta.2","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^4.32.0","@typescript-eslint/parser":"^4.32.0","eslint":"^7.32.0","eslint-config-standard":"^16.0.3","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^24.4.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^5.1.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^27.2.3","jest-junit":"^13.0.0","mocha":"^9.1.2","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","ts-jest":"^27.0.5","typescript":"^4.4.3"},"peerDependencies":{"@fluentui/react-northstar":">0.51.0","@microsoft/teams-js":"^2.0.0-beta.1","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"5da47fc2a5ef29e6db1f5f8b115fe02200e1a7a9","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis is a React hook based on the Microsoft Teams JavaScript SDK and the Fluent UI components, which is used when generating Microsoft Teams Apps using the [Microsoft Teams Yeoman Generator](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n## Usage\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically call `app.initialize()` and `app.getContext()` if the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `context` | `app.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 |\n| `host` | `app.AppHostInfo?` | `undefined` until context is loaded then a shortcut to the host info (`context.app.host`) |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n### Additional helper methods\n\nThe package also exports two helper methods, both used internally by the `useTeams` hook.\n\n`getQueryVariable(name: string): string` - returns the value of the query string variable identified by the name.\n\n`checkInTeams(): boolean` - returns true if hosted inside Microsoft Teams. **Deprecated**\n\n## License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@4.0.0-preview5","_nodeVersion":"14.18.2","_npmVersion":"6.14.15","dist":{"integrity":"sha512-1EqQGkCL/L7Uij3epssvxec8BUliwRZ7kjgg8zOJVV7O5KIXqPcSgbpatMgj9lNl9tLkwWxSuVJcHKmxI0V+bA==","shasum":"43c875dff4ea1f069369eb3a04fe6447dd7c5efc","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-4.0.0-preview5.tgz","fileCount":10,"unpackedSize":22977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtyTvCRA9TVsSAnZWagAA0ngP/Ai3QZ0JEogN3NlfMHXJ\nGTPcN+59CnXCa0u+9DjmF1QZS+AsPkkWbGmvqDV+NPlyWxQ2n2UxqiISeuEt\nLH6yG3gCe3rYjnCqZPLQWpCRGBILa7lroxuctUG4o6aT5eUcww7JX3WO2OD+\n7yd3fDibgfehwzZSm9hZN/iZD7nNY4L7oHHnBGexJuUxUwX53S6RNCJfrYwo\nEPOYJ5ymeESUUBv4L12TLeZa3f0RmVBnfLTL0IEiMVC/7DYM3/ffM+xyRoaU\nu305pNd0pncoslMGAoPRgJbVUFxqEavgA456TkdLIsFe2n1SSdOLZ/cBu6gM\nOrNxClUw2RoH6C3XSXEgabf6WdNhshdH+FBpGVYr8IfNQ8Vb7ITZN8DL6mtc\nKOuW/MSoeDFUBXWbfXn/p7hl7QFa1pEQuMng6WkK55UvJG7wsCE0XRjqmSZf\nCR+A586TeIZCdBHrFDrQXj01cQojQJP+P88c8UUGaJSyU7A3afzOQgMVRGQh\nTLz5TR3HQa3iD9TqyzlDrnCZKk+/H7YPAODBhPKHQubiJgfHE8A/V0gBD21W\n49CLfzT/AqQZSbnfyF7H87YTVy4DcQ1cQuOboCLivxkk3sKrqpFbzajdTkWI\noE6V1OvX1F/HofrXMg7K/+k9SIz/K0uNWnAL+yB1HYhwNhdNS36UtTa1jeLZ\nU50S\r\n=CyWS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB3TbWHHphXqMRvwqYc7JnoIFGqeh9xL2fjHlgMKLCcQIhAP2wToiYXin1fCu5KZErHE6w3J1+dAP9LrhxJLParYn6"}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_4.0.0-preview5_1639392495882_0.3129011632765235"},"_hasShrinkwrap":false},"3.2.0-preview.1":{"name":"msteams-react-base-component","version":"3.2.0-preview.1","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui","mgt"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/mgt-element":"^2.3.2","@microsoft/teams-js":"^1.8.0","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^5.11.0","@typescript-eslint/parser":"^5.11.0","eslint":"^8.8.0","eslint-config-standard":"^16.0.3","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^26.1.0","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^27.2.3","jest-junit":"^13.0.0","mocha":"^9.1.2","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","ts-jest":"^27.0.5","typescript":"^4.4.3"},"dependencies":{"@azure/msal-browser":"^2.22.0","isomorphic-fetch":"^3.0.0","jwt-decode":"^3.1.2"},"peerDependencies":{"@fluentui/react-northstar":">0.51.0","@microsoft/mgt-element":"^2.3.2","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"f47b272a58d01d716a9b3de33e7c8b6333317591","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n# Usage\n\n## `useTeams` hook\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically call `microsoftTeams.initialize()` and `microsoftTeams.getContext()` if the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n### Additional helper methods\n\nThe package also exports two helper methods, both used internally by the `useTeams` hook.\n\n`getQueryVariable(name: string): string` - returns the value of the query string variable identified by the name.\n\n`checkInTeams(): boolean` - returns true if hosted inside Microsoft Teams.\n\n## The `TeamsSsoProvider`\n\nThe `TeamsSsoProvider` allows for a minimal coding experience when using Teams SSO tabs and authorization tokens. It works with Microsoft Teams SSO tabs that are opened inside of Microsoft Teams, as well as outside of Microsoft Teams.\n\n## Importing the provider\n\nImport he provider in your React project as follows:\n\n``` TypeScript\nimport \n  { TeamsSsoProvider, useTeamsSsoContext, TeamsSsoContext } \n  from \"msteams-react-base-component/lib/esm/TeamsSsoProvider\";\n```\n\n### Configuration\n\nThe `TeamsSsoProvider` requires the following configuration properties:\n\n| Property | Description |\n|-|-|\n| `appIdUri` | *Required* The Azure AD App ID URI |\n| `appId` | *Optional* The Azure AD App ID |\n| `scopes` | *Optional* The Scopes to use. Default to `[\"\"]` |\n| `redirectUri` | *Optional* The Redirect URI to be used for the AAD App |\n| `useMgt` | *Optional* Boolean value indicating if the Microsoft Graph Toolkit auth provider should be initialized |\n\n### State\n\nThe `TeamsSsoProvider` contains the following state variables\n\n| Variable | Description  |\n|-|-|\n| `token` | The SSO/access token. `undefined` if not set |\n| `name` | The user name. Defaults to `undefined` |\n| `error` | Any error message. `undefined` if no errors |\n\n### Usage with the `TeamsSsoContext.Consumer`\n\nTo make an SSO token available to all your components, in the tree below the provider, use the following approach:\n\n``` TypeScript\nexport const App = () => {\n    return (\n        <Provider theme={theme}>\n            <TeamsSsoProvider\n              appIdUri={process.env.TAB_APP_URI as string}>\n              <TeamsSsoContext.Consumer>\n              { state => (\n                <div>Your token is <b>${state.token}</b></div> \n              )}\n              </TeamsSsoContext.Consumer>\n            </TeamsSsoProvider>\n        </Provider>\n    );\n}\n```\n\n### Usage with the `useTeamsSsoContext` hook\n\nTo access the token in code and sub components use the following method:\n\n``` TypeScript\n\nconst MyComponent = () => {\n    const { token } = useTeamsSsoContext();\n    return <div>Your token is <b>${token}</b></div>;\n}\n\nexport const App = () => {\n    return (\n        <Provider theme={theme}>\n            <TeamsSsoProvider\n              appIdUri={process.env.TAB_APP_URI as string}>\n                <MyComponent />\n            </TeamsSsoProvider>\n        </Provider>\n    );\n}\n```\n\n### Usage outside of Teams\n\nTo support usage outside of Teams (for instance to use as a PWA), you also need to specify the `appId` and `redirectUri` properties:\n\n``` TypeScript\nexport const App = () => {\n    return (\n        <Provider theme={theme}>\n            <TeamsSsoProvider\n              appIdUri={process.env.TAB_APP_URI as string}\n              appId={process.env.TAB_APP_ID as string}\n              redirectUri={process.env.TAB_APP_REDIRECT as string}>\n              <TeamsSsoContext.Consumer>\n              { state => (\n                <div>Your token is <b>${state.token}</b></div> \n              )}\n              </TeamsSsoContext.Consumer>\n            </TeamsSsoProvider>\n        </Provider>\n    );\n}\n```\n\n### Scopes\n\nTo request more scopes on the access token, than an empty SSO token, you need to specify the scopes in the `scopes` property. Note, that requesting scopes will popup a request for consent dialog, even when inside Microsoft Teams.\n\n``` TypeScript\nexport const App = () => {\n    return (\n        <Provider theme={theme}>\n            <TeamsSsoProvider\n              appIdUri={process.env.TAB_APP_URI as string}\n              appId={process.env.TAB_APP_ID as string}\n              redirectUri={process.env.TAB_APP_REDIRECT as string}\n              scopes={[\"Presence.Read\", \"User.Read\"]}>\n              <TeamsSsoContext.Consumer>\n              { state => (\n                <div>Your token is <b>${state.token}</b></div> \n              )}\n              </TeamsSsoContext.Consumer>\n            </TeamsSsoProvider>\n        </Provider>\n    );\n}\n```\n\n### Usage with Microsoft Graph Toolkit\n\nFor seamless use with the Microsoft Graph Toolkit (MGT), the only thing you need to specify is the `useMgt` property and set it to true:\n\n``` TypeScript\nexport const App = () => {\n    return (\n        <Provider theme={theme}>\n            <TeamsSsoProvider\n              appIdUri={process.env.TAB_APP_URI as string}\n              appId={process.env.TAB_APP_ID as string}\n              redirectUri={process.env.TAB_APP_REDIRECT as string}\n              scopes={[\"Presence.Read\", \"User.Read\"]}>\n              <Person personQuery=\"me\" showPresence={true} />\n            </TeamsSsoProvider>\n        </Provider>\n    );\n}\n```\n# License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@3.2.0-preview.1","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-mdD2bXH84Oat62j8QM0RU131WSneC17QmqoQ9Yx3Bn1FcvXvPUz3C0x1eOOP6wfQXz/H4xV6hjm1tr+m8qQggA==","shasum":"257886f43ac3e26cc63a143029c1524d03dbf96a","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-3.2.0-preview.1.tgz","fileCount":32,"unpackedSize":49528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA8iXCRA9TVsSAnZWagAAG8UP/3D2H9FE2oapy44KbgVS\nYAVtruqE34jNzjD0UJjvn11q2dqfadatvfNDjO/xMziUXRXkmR8Hfmxp1A9a\nKTdg2tPDvIK5xaq9+PD/hnHKIXnX3kex0Ngk8sQmQvLIAdVqw9WFBPQSN244\nzjjJJmX3InKSRnImDFfrhLLFPr3nUhoFXaTS3sQOy5TMQkU3oVzKeCg1G+fl\nrL9FF5+R+psZv6g2NgQ+y3n9SmyFIBEq15T22COKUNbgW/DxPTQ+L1E4wLig\nfu/qfJ1B7IUWTdnoF5B2t/IGC9t7hM5vLE6Dht9pMJRcsNhLTtCin9uF0jeh\nusjawpevn39HB8v6UWgeS0rlr3I8bonasRRsfTHNda8UL6SGq9kt3M60ZsV2\nqwVHujyClkpTn66QVNalzmp7Moa9KDFPQTh1B6l7uqPgEgOjFO8wefFy57P7\neDkaiZPzQzBhb7NzJ711dZkjkddBAQ9lzzD3SuGtJ0d3ous+wB1UF7crfm77\nUEOfIg9QykpNDTgGdZYuPbfOjcmMie3UbSQu+Nsttm3tbxiosmiV9ZSU8zTv\npvtWUxBekIiGuhCy10ZNNONyucIUNQpSzb5tSK5OIue08D8khPDPFs5MpWMF\nHXFIiLS3TxvoplGHTl9YQkLamUVBD+kQEUmbXaF0LZJw24u4f7ALi6ZDMZJh\nuWQl\r\n=D3tN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqdxyMksXqeTkmnDKzua/zSZM1uBVxyMQz4sqbLlxhgwIgUVH/Dhq/x8ZSfHolHQXmRAq4fnF/ZEj0xNVfDwWmBkk="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_3.2.0-preview.1_1644415127442_0.8595189910401986"},"_hasShrinkwrap":false},"3.2.0-preview.2":{"name":"msteams-react-base-component","version":"3.2.0-preview.2","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui","mgt"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.51.0","@microsoft/mgt-element":"^2.3.2","@microsoft/teams-js":"^1.8.0","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^5.11.0","@typescript-eslint/parser":"^5.11.0","eslint":"^8.8.0","eslint-config-standard":"^16.0.3","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^26.1.0","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^27.2.3","jest-junit":"^13.0.0","mocha":"^9.1.2","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","ts-jest":"^27.0.5","typescript":"^4.4.3"},"dependencies":{"@azure/msal-browser":"^2.22.0","isomorphic-fetch":"^3.0.0","jwt-decode":"^3.1.2"},"peerDependencies":{"@fluentui/react-northstar":">0.51.0","@microsoft/mgt-element":"^2.3.2","@microsoft/teams-js":"^1.8.0","react":"^16.8.6","react-dom":"^16.8.6"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"10609d2a1c6a60b2a345dc931a4f34dc230e677e","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n# Usage\n\n## `useTeams` hook\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically call `microsoftTeams.initialize()` and `microsoftTeams.getContext()` if the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n### Additional helper methods\n\nThe package also exports two helper methods, both used internally by the `useTeams` hook.\n\n`getQueryVariable(name: string): string` - returns the value of the query string variable identified by the name.\n\n`checkInTeams(): boolean` - returns true if hosted inside Microsoft Teams.\n\n## The `TeamsSsoProvider`\n\nThe `TeamsSsoProvider` allows for a minimal coding experience when using Teams SSO tabs and authorization tokens. It works with Microsoft Teams SSO tabs that are opened inside of Microsoft Teams, as well as outside of Microsoft Teams.\n\n## Importing the provider\n\nImport he provider in your React project as follows:\n\n``` TypeScript\nimport \n  { TeamsSsoProvider, useTeamsSsoContext, TeamsSsoContext } \n  from \"msteams-react-base-component/lib/esm/TeamsSsoProvider\";\n```\n\n### Configuration\n\nThe `TeamsSsoProvider` requires the following configuration properties:\n\n| Property | Description |\n|-|-|\n| `appIdUri` | *Required* The Azure AD App ID URI |\n| `appId` | *Optional* The Azure AD App ID |\n| `scopes` | *Optional* The Scopes to use. Default to `[\"\"]` |\n| `redirectUri` | *Optional* The Redirect URI to be used for the AAD App |\n| `useMgt` | *Optional* Boolean value indicating if the Microsoft Graph Toolkit auth provider should be initialized |\n| `autoLogin` | *Optional* Boolean value indicating if the provider should automatically log in the user. Defaults to true. If set to false, then `login` of the `TeamsSsoProvider` context object has to be called. |\n\n### Context\n\nThe `TeamsSsoProvider` contains the following context variables and methods\n\n| Variable/method | Description  |\n|-|-|\n| `token` | The SSO/access token. `undefined` if not set |\n| `name` | The user name. Defaults to `undefined` |\n| `error` | Any error message. `undefined` if no errors |\n| `logout()` | Signs the user out of the application |\n| `login()` | Signs the user in to the application |\n\n### Usage with the `TeamsSsoContext.Consumer`\n\nTo make an SSO token available to all your components, in the tree below the provider, use the following approach:\n\n``` TypeScript\nexport const App = () => {\n    return (\n        <Provider theme={theme}>\n            <TeamsSsoProvider\n              appIdUri={process.env.TAB_APP_URI as string}>\n              <TeamsSsoContext.Consumer>\n              { state => (\n                <div>Your token is <b>${state.token}</b></div> \n              )}\n              </TeamsSsoContext.Consumer>\n            </TeamsSsoProvider>\n        </Provider>\n    );\n}\n```\n\n### Usage with the `useTeamsSsoContext` hook\n\nTo access the token in code and sub components use the following method:\n\n``` TypeScript\n\nconst MyComponent = () => {\n    const { token } = useTeamsSsoContext();\n    return <div>Your token is <b>${token}</b></div>;\n}\n\nexport const App = () => {\n    return (\n        <Provider theme={theme}>\n            <TeamsSsoProvider\n              appIdUri={process.env.TAB_APP_URI as string}>\n                <MyComponent />\n            </TeamsSsoProvider>\n        </Provider>\n    );\n}\n```\n\n### Usage outside of Teams\n\nTo support usage outside of Teams (for instance to use as a PWA), you also need to specify the `appId` and `redirectUri` properties:\n\n``` TypeScript\nexport const App = () => {\n    return (\n        <Provider theme={theme}>\n            <TeamsSsoProvider\n              appIdUri={process.env.TAB_APP_URI as string}\n              appId={process.env.TAB_APP_ID as string}\n              redirectUri={process.env.TAB_APP_REDIRECT as string}>\n              <TeamsSsoContext.Consumer>\n              { state => (\n                <div>Your token is <b>${state.token}</b></div> \n              )}\n              </TeamsSsoContext.Consumer>\n            </TeamsSsoProvider>\n        </Provider>\n    );\n}\n```\n\n### Scopes\n\nTo request more scopes on the access token, than an empty SSO token, you need to specify the scopes in the `scopes` property. Note, that requesting scopes will popup a request for consent dialog, even when inside Microsoft Teams.\n\n``` TypeScript\nexport const App = () => {\n    return (\n        <Provider theme={theme}>\n            <TeamsSsoProvider\n              appIdUri={process.env.TAB_APP_URI as string}\n              appId={process.env.TAB_APP_ID as string}\n              redirectUri={process.env.TAB_APP_REDIRECT as string}\n              scopes={[\"Presence.Read\", \"User.Read\"]}>\n              <TeamsSsoContext.Consumer>\n              { state => (\n                <div>Your token is <b>${state.token}</b></div> \n              )}\n              </TeamsSsoContext.Consumer>\n            </TeamsSsoProvider>\n        </Provider>\n    );\n}\n```\n\n### Usage with Microsoft Graph Toolkit\n\nFor seamless use with the Microsoft Graph Toolkit (MGT), the only thing you need to specify is the `useMgt` property and set it to true:\n\n``` TypeScript\nexport const App = () => {\n    return (\n        <Provider theme={theme}>\n            <TeamsSsoProvider\n              appIdUri={process.env.TAB_APP_URI as string}\n              appId={process.env.TAB_APP_ID as string}\n              redirectUri={process.env.TAB_APP_REDIRECT as string}\n              scopes={[\"Presence.Read\", \"User.Read\"]}\n              useMgt={true}>\n              <Person personQuery=\"me\" showPresence={true} />\n            </TeamsSsoProvider>\n        </Provider>\n    );\n}\n```\n# License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@3.2.0-preview.2","_nodeVersion":"14.19.0","_npmVersion":"6.14.16","dist":{"integrity":"sha512-yFJ5oyGibxXZFD74+21IuWmPrzi+NPsvkn7/vs5419jNxM0Zr9erLkNBTQSsW4p7ESQ7ql6tbzmzbq+gFNqGfA==","shasum":"1382ec45274f75d61fc70dd8f3f91ee0f27af251","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-3.2.0-preview.2.tgz","fileCount":32,"unpackedSize":54010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBMWJCRA9TVsSAnZWagAACAcP/RkKqRqkjOXoDF5CqUXk\ndNE/91DDMvzfm4i+bIENy3q/woShWeFcSigO3Ax80o+1h8roKcHe+wLHrrEd\nG6O0+s9q/ONMZW0Q3KW9vkGBDrOWQXA7HDyTrevAktuvmpKwH7j3NjOONZ5y\nbfS4NIf73T/XoAsiDpy5bNvy0SU4fWfSortvVsX2YBrGVRqgOV4WwQqnf/w5\n90Ws8bELXcMrlw+xu8zsAs6AIf23SzoVtY/QtVXcUkgu6yR7DZW6VzEvzSoS\nd2pFTPtiu7d/4eMOVBsqwmgXYNjYzxts3n4N9uZn6tVKrS/Ward84d+xwfCY\npctJe8uv/u+T18Hmf6OXO99hE1qBhIJ9Fo1JaNwMxu6rNNgu7jgfFlhTkKdF\nINoLI0hLAp1kgwoR8EiprNtVaH5iAOoKvZE/msQRH2aJmTv279nCxNHLtu3S\nzZtcGc4Z7azH5Ui5u1lL3SpGc7gBwW3W/nY4BetMQO7nQI2gPHMIYwGgOp5x\nkV8V5febwndEUZM4hyJvYQ1b29fYTUuxS07F4saEkDnUhzNuIg7UXg5f0xie\n41yf/vM9KNrjjKe7xoRcAB98wJOaYJh3gl8+yVDQ16pfyCBei01rVQ0PWNIF\n7r+TPxD6Ty4hpJvD8Nfd4Tt4kBFnotKwuVB7yx1Ht8H2dEpqyqLpzdM54lZp\nEw1L\r\n=dQOI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqff+DUAiX2V0PceZXaId1+9miLKwpywmIWz9NM00g0gIgdjnpES7Mphiq+BUL0d0IeyIcuAoNXRs2jWawKa2toNs="}]},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_3.2.0-preview.2_1644479881762_0.8189916642483535"},"_hasShrinkwrap":false},"4.0.0-preview.6":{"name":"msteams-react-base-component","version":"4.0.0-preview.6","description":"React helper components for Microsoft Teams apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui","mgt"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.62.0","@microsoft/teams-js":"^2.0.0-beta.6","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^5.11.0","@typescript-eslint/parser":"^5.11.0","eslint":"^8.15.0","eslint-config-standard":"^17.0.0","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^26.1.0","eslint-plugin-n":"^15.2.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^28.1.0","jest-environment-jsdom":"^28.1.0","jest-junit":"^13.0.0","mocha":"^10.0.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","scheduler":"^0.20.2","ts-jest":"^28.0.2","typescript":"^4.4.3"},"dependencies":{"jwt-decode":"^3.1.2"},"peerDependencies":{"@fluentui/react-northstar":">=0.62.0","@microsoft/teams-js":"^2.0.0-beta.6","react":"^16.8.6","react-dom":"^16.8.6"},"engines":{"node":">=12.22.0"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"717d889b334a8b989bd1256b0ade667de299636a","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n# Usage\n\n## `useTeams` hook\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically initialize the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n# License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@4.0.0-preview.6","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-o6RPM57E9v7KpQ6ENxY82VBAEJkANzpA//Jl6HQj+HGt0N0Vr6OXAkKzgLMx3WLp5kN4svgSzeooW18y16f3Dw==","shasum":"3ca5b146f20d777389de4d38712f97b895977d62","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-4.0.0-preview.6.tgz","fileCount":12,"unpackedSize":21181,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCHzOwcme4wg3Ui+Bp5YGOnpLNmgZV4cZMvkdevuZUgPMCIFzwvkOQ8jeEY+Sl+pBoaxhJIsFn/WX8AXJ3D3oy644e"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifMWfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHWQ/8DgyXR4GJ45fyP5FCT7aQ7qwyvGbMqODVIkOeM/ZYqVmPLDdJ\r\nN+FRg4maG+n1P1EOKrzNq1KU+yM4B2XI7JKo4WTVELOYzqAREOUYRnnLVFBK\r\nT9AJfmOe4YJ9lIcdhCwLB6kFajNOHQtfKpkaOJ2f+u/hiEd5ArdT9Ic+8mxQ\r\nF/nf11O/cbSJBVW4QvDWqiUG/UhZ62vebQg4igGuUY2TtuY4BnKaqCpVGdvG\r\n75FujZm1Ti0WkI0HJvCwUn09yck3mcVJcKJawIV5PCAkpB2og/6EYPLbfWMR\r\nPbhw+ZdHsgJPRjQIVKe+v9PDIfJRprG4CSGizi45rKIYcpBmZBwYTV5J9MJo\r\nHdNVA4EvxOYJEidLs9SBD66I7adxvyVA5kG6icpxqsHvlzQss1EEry/C6VvU\r\n4cY0DoUsjm6k0pP8WcEsVk7r7JbEEdSkVyKnbexsNeD6EsJPEpPJsm70cGsF\r\nx55Yxe7gcB+QPf2fqZ6e+GBs+t8/U1K3pk5DSz5jedi6J4v08LsXLiDfrDBH\r\nMPFPXY6E0HoE1MNGdKwEO2juifp8PePaHjqoABVQLRRf62IH55gsCFq/wMDR\r\ny+rULsVePIuDuwbcH5rX8enRdwWogOsagodbbnBl+/wzxGJBRekCJtctx6/C\r\nj1CYIE+xj0bhADgW9gDcDfAhr6u8Ktdun2Q=\r\n=4ZMo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_4.0.0-preview.6_1652344223375_0.032438321065005216"},"_hasShrinkwrap":false},"4.0.0-preview.7":{"name":"msteams-react-base-component","version":"4.0.0-preview.7","description":"React helper components for Microsoft 365 Teams, Office and Outlook apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui","mgt"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.62.0","@microsoft/teams-js":"^2.0.0","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^5.11.0","@typescript-eslint/parser":"^5.11.0","eslint":"^8.15.0","eslint-config-standard":"^17.0.0","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^26.1.0","eslint-plugin-n":"^15.2.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^28.1.0","jest-environment-jsdom":"^28.1.0","jest-junit":"^13.0.0","mocha":"^10.0.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","scheduler":"^0.20.2","ts-jest":"^28.0.2","typescript":"^4.4.3"},"dependencies":{"jwt-decode":"^3.1.2"},"peerDependencies":{"@fluentui/react-northstar":">=0.62.0","@microsoft/teams-js":"^2.0.0","react":"^16.8.6","react-dom":"^16.8.6"},"engines":{"node":">=12.22.0"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"293fecb21953a9b62ad6480fa65d961b33b43e0d","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n# Usage\n\n## `useTeams` hook\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically initialize the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n# License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@4.0.0-preview.7","_nodeVersion":"14.19.2","_npmVersion":"6.14.17","dist":{"integrity":"sha512-/uSNmF1i1tqQLRhn/4qDcb16BlLEmEhS5HT1QPKd4uQF7p3jnZwiVUXNiwtrqi7jbNKhzDo5EuDBPPBJKUHhXw==","shasum":"754bfcf2dca56809d9ff2b4636ff87ec29a4e59e","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-4.0.0-preview.7.tgz","fileCount":12,"unpackedSize":21191,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2MSXEX4rhjDjt5p00pHF/P5r1w/ObK0gD97+Y3j+owAiEAgTtoudm8a6u6hJSXdtJhJpWv4SQrnBso6uDXk1qjglw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihVbUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjrA/+NeD9I69Fbe3fJU8PjD72ehUt8gjzb23OfDiNb6rS9V3ICIh3\r\nTDnB8YJYkS354Do0Zf3zvFeWKUzvp4rMvPGnDzVlN7fsMETySw9LDP9iLNIT\r\npeNUsqYsGP6Ghk/doWhbQxAx1N8KjHPXRZIaXG6YXM6indjcBFdyxst1Lm4R\r\n28FpaoEknz6rpFgl51AphhRXH5NYERiCEUIyDEV9eteSI+wIqQ56YUvB3DO9\r\nwS7Ha5mC17lrF2QKpZMZxpUzZD0R8IR1TZOrdUYwbkVNpsrydLMJvRsufGbr\r\nHjAHxHGtB7g4jwG7bSwYRO7DNgQCLTFbOcYZ3WpLXB8vMCyCOEcpAtaJFKw2\r\nsuk3LpQrMB4jYYv/xjPT5fmzFRBVBwA0GOBElKj8ndSx98CL1GyjEiZzV4TA\r\nIDaE3Q+QBYnvruP1CHAzJ1IuPox2z2W8iugUabvkRMfPEJT0Ib5sxYinzgqz\r\nsnrILlElk3JY/O0KeXOQllYZNmezsT3wDyxKTA1RJC5kpzTuOODvyVmQvgLq\r\nFx+4lSL1DmDyyluBsrQrAZ55rxFmheaIrTJg/Jfk0niGaHYgrZN7zzsAsU9q\r\nA4obTCfs/s8jRwLXDs5veZG8wVAnL6sk8RApqOfqwewRxx720H2JjN8fbcQf\r\nn2cgzuGqUh8Mn2ZlS/hpNAm+PL7cobBDIpw=\r\n=A2FZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_4.0.0-preview.7_1652905684485_0.4802358297856355"},"_hasShrinkwrap":false},"4.0.0":{"name":"msteams-react-base-component","version":"4.0.0","description":"React helper components for Microsoft 365 Teams, Office and Outlook apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui","mgt"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.62.0","@microsoft/teams-js":"^2.0.0","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^5.11.0","@typescript-eslint/parser":"^5.11.0","eslint":"^8.15.0","eslint-config-standard":"^17.0.0","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^26.1.0","eslint-plugin-n":"^15.2.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^28.1.0","jest-environment-jsdom":"^28.1.0","jest-junit":"^13.0.0","mocha":"^10.0.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","scheduler":"^0.20.2","ts-jest":"^28.0.2","typescript":"^4.4.3"},"dependencies":{"jwt-decode":"^3.1.2"},"peerDependencies":{"@fluentui/react-northstar":">=0.62.0","@microsoft/teams-js":"^2.0.0","react":"^16.8.6","react-dom":"^16.8.6"},"engines":{"node":">=12.22.0"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"7514053dc028337d6d3db5e6bf1ceb95660ac97e","_id":"msteams-react-base-component@4.0.0","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-W+ibrvPKsdHwp0rq6PpQHyofyNK3rCNfSbu41+0ZRXmCXbDlipVkJfIRy9twSwy2BensUYubrR7H+02hdT+G3g==","shasum":"85ca9dd3bc58f7c0bcfea3ce6f7beb9fda4c5f64","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-4.0.0.tgz","fileCount":12,"unpackedSize":21102,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTbCzignEHQP+ih8nTd4JZv+nFZbiqsfd828LZcwQLvwIhANErX4hW/fkfxf1eoBaMdx2WpXsD7gmqQofOsRUOzVcE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitCeEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBjA//ZduCDwpNAA+5omZcxbG+43SzaaIeppPWev65U6Vo9hQ6sdTy\r\n7JhbjtyIw+K5BP5cM4+QueGg1Wuj5oAjxAkuuEPCcX+IUVdYB2/KEXJUYFuf\r\nQaRVwvUc4R3zxBFndD2hmC/8DLypE4xecHoGhJoXzGIRzO7fbF1/1ez9tZSj\r\nDOzcxlP0jPcNU7eL9ZD3Oy4UCPR1WAw2Ze0XayzbBFlNRRb9H77+pM6p1gsO\r\ny834k4VEF+fji8tD6lf0kdW/+FK3VKvlupCaFzDI9RDSi/cBleWYhZZfMI4v\r\ngL4s2dlJJfcitDeowLGr92Y+2mqQLPi0h6M7MKZEqo6usv2wSG7G2axS9X3S\r\nH3Iq45ktVNs/Q9BsYhC3+DTkNhBbO+mbc5muCYi00S2Pn8e59Fauh1u1l08v\r\nV9iu81ppU+lxmJofSNhd+O0d0M5o8OnpGMu7gG8iMewULy/FQR3KNiUS6y9Y\r\nAYRH8vegy4Vw41iyMZ/vGhkn7OTWXcLMO21/j0k6BgOy09DEu8+xzju4pAvP\r\nYow9PjsQlkEfu0RIgS7aSw9Zlho18cYxDRe+oOt/bH5LkUATMJ/dVin5sgRh\r\nFVYQAsGZWCeXdZTh/OBZBQairlN1y/2Od0PadGby6OXKxqLs/0iraftBm5Qa\r\n5OiLs9UPfKtyWqO4xTxl0Ho2OmET/WuLOHE=\r\n=SI5U\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_4.0.0_1655973764621_0.6149934127368946"},"_hasShrinkwrap":false},"4.0.1-preview":{"name":"msteams-react-base-component","version":"4.0.1-preview","description":"React helper components for Microsoft 365 Teams, Office and Outlook apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui","mgt"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.62.0","@microsoft/teams-js":"^2.0.0","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^5.11.0","@typescript-eslint/parser":"^5.11.0","eslint":"^8.15.0","eslint-config-standard":"^17.0.0","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^26.1.0","eslint-plugin-n":"^15.2.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^28.1.0","jest-environment-jsdom":"^28.1.0","jest-junit":"^13.0.0","mocha":"^10.0.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","scheduler":"^0.20.2","ts-jest":"^28.0.2","typescript":"^4.4.3"},"dependencies":{"jwt-decode":"^3.1.2"},"peerDependencies":{"@fluentui/react-northstar":">=0.62.0","@microsoft/teams-js":"^2.0.0","react":"^16.8.6","react-dom":"^16.8.6"},"engines":{"node":">=12.22.0"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"2dbb65dd3a49c4faf2c407090d389c36426bdf7b","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n# Usage\n\n## `useTeams` hook\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically initialize the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n# License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md","_id":"msteams-react-base-component@4.0.1-preview","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-DhKs2yOZit9JomMk2XuXu5mscsNOSTVVFLsqC/8jXE2hiYDG92u0amoxSKniv26P8YPZLZhrKQUXDSDhQb4H6w==","shasum":"6adbb8ce84ac94a2c5241175b4e03806d7a07f7a","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-4.0.1-preview.tgz","fileCount":12,"unpackedSize":20318,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDx1oGVzkqIFHYP5Yywg2HXjJTk7BHCpML9hgTOkcoeFAiAeNuNxcLYHWEx7IGhFp1BIq+17mowD9+LikVqLzwrxqw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiuq/vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCsRAAl14VHrlOE7hoTtsdin7TgT5CNPJvQz3rFTzR1SWPYjyj6vpF\r\naiCguqIMffyeg4na06fgz23TgIZ9xP1u9Rc7uXWFsrp05H12+fHd3emV9Yyy\r\nuNeFjydl804JZ9sAUwBx7YL11E0MFOdbRzLXAnitcia10ucEAcQSsVV7WFF8\r\nhdspSPXfvR1PbAxFajfvSQix1mRBQt8Z1IyHgAOs54XriNykXzDaBnkILefP\r\nUCEAPmHRTlykCp80sm3hC++5oqoCW8B/9wThPeUBH8ja94iaFwl41s+bGVdx\r\nmsiQea32nUSNQyu9Qmqi+leWPhrdkfYYdKMiUealqY0vzbuIeM1OmsMUQGzE\r\nzAwHjGTlEXIvGMP+Iu9ZQcy11NzCLmemQgvhzXVbxMbUcssmNas94XqIqeHx\r\nPZuet8TWEZ+ZJ7s563GmulA8Y1pgdi5Y+2eFjO2oEcG8p8WKK8xgd6dgEAI8\r\nVjmr9leYdZ+nqDBxTMleecTAU8bBfQxRvWqUb40EAv8hKeg4N6McRay9vqj4\r\nnShvFgeiPePdDDcJzaeLELMw7LOEDfHQop0cqNFatwlW2duzuz0PoLRVvaIJ\r\njGSBLtwO0voyt7LlBUnG6SnzO0sxxaQdCAiJ6fReCwGdE5VY2O0cZ8ki/Z3y\r\nNWHRO5cgjlgnLl+4yzCDZSV8NZRKt7G7VmY=\r\n=cgBj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_4.0.1-preview_1656401902665_0.5645987874353176"},"_hasShrinkwrap":false},"4.0.1":{"name":"msteams-react-base-component","version":"4.0.1","description":"React helper components for Microsoft 365 Teams, Office and Outlook apps","main":"lib/cjs/index.js","module":"lib/esm/index.js","types":"lib/cjs/index.d.ts","scripts":{"prepublishOnly ":"npm run clean && npm run build","build":"tsc -p tsconfig.json && tsc -p tsconfig.es.json","clean":"rimraf lib","test":"jest --ci --reporters=jest-junit --reporters=default --coverage --coverageDirectory='coverage' --collectCoverageFrom='src/**/*.{ts,tsx,js}'","lint":"eslint ./src/**/*.{js,ts,tsx}"},"keywords":["react","microsoft-teams","msteams","typescript","fluentui","mgt"],"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"homepage":"https://github.com/wictorwilen/msteams-react-base-component","license":"MIT","devDependencies":{"@fluentui/react-northstar":"^0.62.0","@microsoft/teams-js":"^2.0.0","@testing-library/react":"^12.1.1","@types/enzyme":"^3.10.10","@types/jest":"^27.0.2","@types/react":"^16.9.56","@types/react-dom":"^16.8.4","@typescript-eslint/eslint-plugin":"^5.11.0","@typescript-eslint/parser":"^5.11.0","eslint":"^8.15.0","eslint-config-standard":"^17.0.0","eslint-plugin-import":"^2.24.2","eslint-plugin-jest":"^26.1.0","eslint-plugin-n":"^15.2.0","eslint-plugin-promise":"^6.0.0","eslint-plugin-react":"^7.26.0","eslint-plugin-react-hooks":"^4.2.0","jest":"^28.1.0","jest-environment-jsdom":"^28.1.0","jest-junit":"^13.0.0","mocha":"^10.0.0","react":"^16.8.6","react-dom":"^16.8.6","rimraf":"^3.0.2","scheduler":"^0.20.2","ts-jest":"^28.0.2","typescript":"^4.4.3"},"dependencies":{"jwt-decode":"^3.1.2"},"peerDependencies":{"@fluentui/react-northstar":">=0.62.0","@microsoft/teams-js":"^2.0.0","react":"^16.8.6","react-dom":"^16.8.6"},"engines":{"node":">=12.22.0"},"funding":{"type":"individual","url":"https://github.com/sponsors/wictorwilen/"},"gitHead":"108249ea1b12ead20a5d129d7b15876407e27e2f","_id":"msteams-react-base-component@4.0.1","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-jUr+4wItGJXqxifuMVCiMe+lvhO/vs3MIaMm2N030uYCrBCOr7MBNnniO/2WNfKs1sRdA8cSjgAfpG9O+M+rzg==","shasum":"ad4486b62dfd443551a3a51b657124d73d8d76fa","tarball":"https://registry.npmjs.org/msteams-react-base-component/-/msteams-react-base-component-4.0.1.tgz","fileCount":12,"unpackedSize":20310,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAncSF/AABmlaXfwaqSyVjM5J4hUBlJyERbGFOBSoTdUAiEA4N0DUAJc+XxXTAJHIF1oBQoMYQ1GGu7lcLEABtJ0MMU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiurkvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN3w/9H0zGULDoWrpt6o9SGRd5LuDTS+YETP661b3FJ7p6GM6kdLyK\r\ngCuGqdxoGqHZYX29I2xbZKQtV/UyoPpSqJ+HUwizpLZa9xyb9jvWPchHPFS3\r\nYwV1zZ7gG00LuMu5v9C2xiSBwy97ls2TnzPAuGfPuwgJ0dmfaA0MzJWIEMRb\r\ngywR2Vbw//jRMfQB7azLO0K7LBbuQKMbCBoK9Gql8cIpzbERzsNx20aXnBd3\r\ngKCGSAjUTWlFRlkntjzW3s4CLI9pFeF2e7zDNpJoqgRa2ehl64HF2fsFOiA4\r\nT85fOCmnMmVMGxSMjiZRTjwprn9C8UT81vE1Z1Z+87TRAGzRZwA7H5N1Qgrl\r\nNGZB5sbS1/WRe4rGHcVvu53RNaLNNASE5b5EwZPuNv+SFTrnQNGCosnPBBBQ\r\nF9ChqM/Tz9beI7r1DAiaBh3b5PElCu82QPPxVg5VxN/k7phCHPLzaq5BXYCS\r\n7mfUncNS0QW+loTWNmdv+nAm0W0ZX06uWumNGX4IiC19YBt4EeGxHrxE9xbd\r\nBaeQba44LctPV0dvJMQ4XpFIAkF9bdceQcnQKZZk2TCO8VY/vVLTgmuhnvXM\r\nKf/8zjgcDv79Pk5eMEYuc2aUJdZOFXFQZD9XU8YBtRJKE3+KehNEaelnSKaK\r\nIyz1BMt3SkS5iG8FjWgOIn0vedXVDENSUUY=\r\n=HUg9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wictorwilen","email":"wictor@wictorwilen.se"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/msteams-react-base-component_4.0.1_1656404271017_0.5568711759366609"},"_hasShrinkwrap":false}},"time":{"created":"2018-07-28T14:29:21.823Z","0.0.1":"2018-07-28T14:29:21.939Z","modified":"2022-06-28T08:17:51.339Z","0.0.2":"2018-07-28T20:35:14.128Z","0.0.3":"2018-07-28T22:54:23.025Z","0.0.4":"2018-07-30T21:12:06.616Z","1.0.0":"2018-08-13T17:54:28.180Z","1.1.0-preview":"2019-03-22T22:15:57.203Z","1.1.0":"2019-03-24T17:50:40.999Z","1.1.1-Preview":"2019-04-17T08:53:18.142Z","1.1.1":"2019-04-17T09:00:50.030Z","2.0.0-preview":"2019-09-23T12:41:47.800Z","2.0.0-preview2":"2020-02-05T01:36:29.134Z","2.0.0-preview3":"2020-02-05T13:43:47.962Z","2.0.0":"2020-03-05T09:42:34.737Z","2.1.0-preview":"2020-04-19T15:44:07.507Z","2.1.0-preview2":"2020-05-14T06:05:23.418Z","2.1.0-preview3":"2020-05-14T06:57:35.199Z","2.1.0-preview4":"2020-05-15T10:18:50.932Z","2.1.0":"2020-05-17T14:51:56.799Z","2.2.0-preview":"2020-09-07T16:07:06.806Z","2.2.0-preview2":"2020-10-13T14:07:50.293Z","2.2.0-preview3":"2020-10-27T14:16:46.956Z","2.2.0":"2020-10-28T00:29:34.763Z","3.0.0-preview":"2020-11-17T12:43:21.354Z","3.0.0-preview2":"2020-11-24T16:39:40.266Z","3.0.0":"2020-12-06T15:42:35.484Z","3.0.1-preview":"2020-12-11T08:39:48.170Z","3.0.1":"2020-12-18T12:37:42.138Z","3.0.2":"2021-01-29T08:28:49.681Z","3.1.0":"2021-03-01T17:38:57.614Z","3.1.1-preview":"2021-09-28T12:08:11.744Z","3.1.1":"2021-09-30T07:01:02.248Z","4.0.0-preview":"2021-11-11T18:24:17.102Z","4.0.0-preview2":"2021-11-15T07:42:30.909Z","4.0.0-preview3":"2021-11-15T13:31:17.506Z","4.0.0-preview4":"2021-11-16T13:23:36.177Z","4.0.0-preview5":"2021-12-13T10:48:15.999Z","3.2.0-preview.1":"2022-02-09T13:58:47.646Z","3.2.0-preview.2":"2022-02-10T07:58:01.997Z","4.0.0-preview.6":"2022-05-12T08:30:23.563Z","4.0.0-preview.7":"2022-05-18T20:28:04.631Z","4.0.0":"2022-06-23T08:42:44.823Z","4.0.1-preview":"2022-06-28T07:38:22.995Z","4.0.1":"2022-06-28T08:17:51.259Z"},"maintainers":[{"name":"wictorwilen","email":"wictor@wictorwilen.se"}],"description":"React helper components for Microsoft 365 Teams, Office and Outlook apps","homepage":"https://github.com/wictorwilen/msteams-react-base-component","keywords":["react","microsoft-teams","msteams","typescript","fluentui","mgt"],"repository":{"type":"git","url":"git+https://github.com/wictorwilen/msteams-react-base-component.git"},"author":{"name":"Wictor Wilén","url":"wictor@wictorwilen.se"},"bugs":{"url":"https://github.com/wictorwilen/msteams-react-base-component/issues"},"license":"MIT","readme":"# Microsoft Teams UI Controls base component\n\n[![npm version](https://badge.fury.io/js/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![npm](https://img.shields.io/npm/dt/msteams-react-base-component.svg)](https://www.npmjs.com/package/msteams-react-base-component)\n[![MIT](https://img.shields.io/npm/l/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/blob/master/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/wictorwilen/msteams-react-base-component.svg)](https://github.com/wictorwilen/msteams-react-base-component/issues?q=is%3Aissue+is%3Aclosed)\n\nThis 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](https://aka.ms/yoteams).\n\n | @master | @preview |\n :--------:|:---------:\n ![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/master)|![Build Status](https://img.shields.io/github/workflow/status/wictorwilen/msteams-react-base-component/msteams-react-base-component%20CI/preview)\n\n# Usage\n\n## `useTeams` hook\n\nTo use this package in a Teams tab or extension import the `useTeams` Hook and then call it inside a functional component.\n\n``` TypeScript\nconst [{inTeams}] = useTeams();\n```\n\nThe `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.\n\n> **NOTE**: using the hook will automatically initialize the Microsoft Teams JS SDK is available.\n\n### useTeams Hook arguments\n\nThe `useTeams` hook can take an *optional* object argument:\n\n| Argument | Description |\n|----------|-------------|\n| `initialTheme?: string` | Manually set the initial theme (`default`, `dark` or `contrast`) |\n| `setThemeHandler?: (theme?: string) => void` | Custom handler for themes |\n\n### Available properties\n\n| Property name | Type | Description |\n|---------------|------|-------------|\n| `inTeams` | boolean? | `true` if hosted in Teams and `false` for outside of Microsoft Teams |\n| `fullScreen` | boolean? | `true` if the Tab is in full-screen, otherwise `false` |\n| `themeString` | string | The value of `default`, `dark` or `contrast` |\n| `theme` | ThemePrepared | The Fluent UI Theme object for the current theme |\n| `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 |\n\n### Available methods\n\n| Method name | Description |\n|-------------|-------------|\n| `setTheme(theme?: string)` | Method for manually setting the theme |\n\n## Full example\n\nExample of usage:\n\n```  TypeScript\nimport * as React from \"react\";\nimport { Provider, Flex, Header } from \"@fluentui/react-northstar\";\nimport { useState, useEffect } from \"react\";\nimport { useTeams } from \"msteams-react-base-component\";\n\n/**\n * Implementation of the hooks Tab content page\n */\nexport const HooksTab = () => {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() => {\n        if (inTeams === true) {\n            setMessage(\"In Microsoft Teams!\");\n        } else {\n            if (inTeams !== undefined) {\n                setMessage(\"Not in Microsoft Teams\");\n            }\n        }\n    }, [inTeams]);\n\n    return (\n        <Provider theme={theme}>\n            <Flex fill={true}>\n                <Flex.Item>\n                    <Header content={message} />\n                </Flex.Item>\n            </Flex>\n        </Provider>\n    );\n};\n```\n\n# License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","readmeFilename":"README.md"}