# @vonrehberg.consulting/mgt-components

> The Microsoft Graph Toolkit Components

Latest version **2.10.0** (published 2022-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vonrehberg.consulting/mgt-components
pnpm add @vonrehberg.consulting/mgt-components
yarn add @vonrehberg.consulting/mgt-components
bun add @vonrehberg.consulting/mgt-components
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.10.0 |
| Published | 2022-12-29 |
| First published | 2022-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 3.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Microsoft |
| Maintainers | vonrehberg.consulting |
| Keywords | microsoft graph, web components |

## Links

- npm: https://www.npmjs.com/package/@vonrehberg.consulting/mgt-components
- Repository: https://github.com/VonRehbergConsulting/microsoft-graph-toolkit
- Issues: https://github.com/microsoftgraph/microsoft-graph-toolkit/issues
- npm.io page: https://npm.io/package/@vonrehberg.consulting/mgt-components

## Dependencies (6)

- [office-ui-fabric-core](https://npm.io/package/office-ui-fabric-core.md) 11.0.0
- [@fluentui/web-components](https://npm.io/package/@fluentui/web-components.md) 0.22.1
- [@microsoft/microsoft-graph-types](https://npm.io/package/@microsoft/microsoft-graph-types.md) ^2.0.0
- [@microsoft/microsoft-graph-client](https://npm.io/package/@microsoft/microsoft-graph-client.md) ^2.2.1
- [@vonrehberg.consulting/mgt-element](https://npm.io/package/@vonrehberg.consulting/mgt-element.md) *
- [@microsoft/microsoft-graph-types-beta](https://npm.io/package/@microsoft/microsoft-graph-types-beta.md) ^0.16.0-preview

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 2.10.0 (latest) — 2022-12-29
- 2.9.3 — 2022-12-28
- 2.9.2 — 2022-12-28
- 2.9.1 — 2022-12-28
- 2.0.1 — 2022-12-28

## README

# Microsoft Graph Toolkit Web Components

[![npm](https://img.shields.io/npm/v/@vonrehberg.consulting/mgt-components?style=for-the-badge)](https://www.npmjs.com/package/@vonrehberg.consulting/mgt-components)

The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) web components package is a collection of web components powered by Microsoft Graph. The components are functional, work automatically with Microsoft Graph, and work with any web framework and on all modern browsers.

> Note: If you are building with React, you might find `@vonrehberg.consulting/mgt-react` useful as well.

[See docs for full documentation](https://aka.ms/mgt-docs)

## Components
You can explore components and samples with the [playground](https://mgt.dev) powered by storybook.

The Toolkit currently includes the following components:

* [mgt-login](https://learn.microsoft.com/graph/toolkit/components/login)
* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
* [mgt-people](https://learn.microsoft.com/graph/toolkit/components/people)
* [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
* [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)
* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
* [mgt-teams-channel-picker](https://learn.microsoft.com/graph/toolkit/components/teams-channel-picker)

The components work best when used with a [provider](https://learn.microsoft.com/graph/toolkit/providers). The provider handles authentication and the requests to the Microsoft Graph APIs used by the components.

## Get started

The components can be used on their own, but they are at their best when they are paired with an authentication provider. This example illustrates how to use the components alongside a provider (MsalProvider in this case).

1. Install the packages

    ```bash
    npm install @vonrehberg.consulting/mgt-element @vonrehberg.consulting/mgt-components @vonrehberg.consulting/mgt-msal-provider
    ```

1. Use components in your code

    ```html
    <script type="module">
      import {Providers} from '@vonrehberg.consulting/mgt-element';
      import {MsalProvider} from '@vonrehberg.consulting/mgt-msal-provider';

      // import the components
      import '@vonrehberg.consulting/mgt-components';

      // initialize the auth provider globally
      Providers.globalProvider = new MsalProvider({clientId: 'clientId'});
    </script>

    <mgt-login></mgt-login>
    <mgt-person person-query="Bill Gates" person-card="hover"></mgt-person>
    <mgt-agenda group-by-day></mgt-agenda>
    ```

## Sea also
* [Microsoft Graph Toolkit docs](https://aka.ms/mgt-docs)
* [Microsoft Graph Toolkit repository](https://aka.ms/mgt)
* [Microsoft Graph Toolkit playground](https://mgt.dev)

---
_Source: https://npm.io/package/@vonrehberg.consulting/mgt-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._