{"id":16431176,"url":"https://github.com/wictorwilen/msteams-react-base-component","last_synced_at":"2025-03-21T04:32:04.121Z","repository":{"id":32790361,"uuid":"142683052","full_name":"wictorwilen/msteams-react-base-component","owner":"wictorwilen","description":"React helper components for Microsoft Teams apps","archived":false,"fork":false,"pushed_at":"2023-01-07T21:57:17.000Z","size":1000,"stargazers_count":20,"open_issues_count":5,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-12T08:29:19.943Z","etag":null,"topics":["hacktoberfest","microsoft-teams","microsoft365","react-hooks","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wictorwilen.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-28T14:19:17.000Z","updated_at":"2023-11-28T08:05:51.000Z","dependencies_parsed_at":"2023-01-14T22:14:29.713Z","dependency_job_id":null,"html_url":"https://github.com/wictorwilen/msteams-react-base-component","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wictorwilen%2Fmsteams-react-base-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wictorwilen%2Fmsteams-react-base-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wictorwilen%2Fmsteams-react-base-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wictorwilen%2Fmsteams-react-base-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wictorwilen","download_url":"https://codeload.github.com/wictorwilen/msteams-react-base-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221811346,"owners_count":16884305,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","microsoft-teams","microsoft365","react-hooks","typescript"],"created_at":"2024-10-11T08:29:22.908Z","updated_at":"2024-10-28T09:21:20.203Z","avatar_url":"https://github.com/wictorwilen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"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\u003e **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) =\u003e 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 = () =\u003e {\n    const [{ inTeams, theme }] = useTeams({});\n    const [message, setMessage] = useState(\"Loading...\");\n\n    useEffect(() =\u003e {\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        \u003cProvider theme={theme}\u003e\n            \u003cFlex fill={true}\u003e\n                \u003cFlex.Item\u003e\n                    \u003cHeader content={message} /\u003e\n                \u003c/Flex.Item\u003e\n            \u003c/Flex\u003e\n        \u003c/Provider\u003e\n    );\n};\n```\n\n# License\n\nCopyright (c) Wictor Wilén. All rights reserved.\n\nLicensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwictorwilen%2Fmsteams-react-base-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwictorwilen%2Fmsteams-react-base-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwictorwilen%2Fmsteams-react-base-component/lists"}