You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
6
+
7
+
> Note: If you are building with React, you might find `@microsoft/mgt-react` useful as well.
8
+
9
+
[See docs for full documentation](https://aka.ms/mgt-docs)
10
+
11
+
## Components
12
+
You can explore components and samples with the [playground](https://mgt.dev) powered by storybook.
13
+
14
+
The Toolkit currently includes the following components:
The components work best when used with a [provider](https://docs.microsoft.com/graph/toolkit/providers). The provider handles authentication and the requests to the Microsoft Graph APIs used by the components.
28
+
29
+
## Get started
30
+
31
+
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).
The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.
6
+
7
+
The `@microsoft/mgt-element` package contains all base classes that enable the providers and components to work together. Use this package to set the global provider, or to create your own providers and/or components that work with Microsoft Graph.
8
+
9
+
[See docs for full documentation](https://aka.ms/mgt-docs)
10
+
11
+
## Set and use the global provider
12
+
13
+
The `@microsoft/mgt-element` package exposes the `Providers` namespace that enables global usage of the authentication providers across your entire app.
14
+
15
+
This example illustrates how to instantiate a new provider (MsalProvider in this case) and use it across your app:
import {MsalProvider} from '@microsoft/mgt-msal-provider';
28
+
29
+
// initialize the auth provider globally
30
+
Providers.globalProvider = new MsalProvider({clientId: 'clientId'});
31
+
```
32
+
33
+
1. Use the provider to sign in and call the graph:
34
+
35
+
```ts
36
+
import {Providers, ProviderState} from '@microsoft/mgt-element';
37
+
38
+
const handleLoginClicked = async () => {
39
+
await Providers.globalProvider.login();
40
+
41
+
if (Providers.globalProvider.state === ProviderState.SignedIn) {
42
+
let me = await Provider.globalProvider.graph.client.api('/me').get();
43
+
}
44
+
}
45
+
```
46
+
47
+
You can learn more about how to use the providers in the [documentation](https://docs.microsoft.com/graph/toolkit/providers).
48
+
49
+
The providers work well with the `@microsoft/mgt-components` package and all components use the provider automatically when they need to call Microsoft Graph.
50
+
51
+
## Create your own provider
52
+
53
+
In scenarios where you want to use the Providers namespace and/or add Microsoft Graph Toolkit components to an application with pre-existing authentication code, you can create a custom provider that hooks into your authentication mechanism. `@microsoft/mgt-element` enables two ways to create new providers:
54
+
55
+
### Create a Simple Provider
56
+
57
+
If you already have a functionthat returns `accessTokens`, you can use a SimpleProvider to wrap the function:
58
+
59
+
```ts
60
+
import {Providers, SimpleProvider} from '@microsoft/mgt-element';
Provider.globalProvider = new SimpleProvider(getAccessToken, login, logout);
81
+
```
82
+
83
+
### Extend an IProvider
84
+
85
+
You can extend the IProvider abstract class to create your own provider. The IProvider is similar to the SimpleProvider in that it requires the developer to implement the `getAccessToken()` function.
86
+
87
+
88
+
See the [custom provider documentation](https://docs.microsoft.com/en-us/graph/toolkit/providers/custom) for more details on both ways to create custom providers.
Copy file name to clipboardExpand all lines: packages/mgt-react/readme.md
+14-20Lines changed: 14 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,8 +4,6 @@
4
4
5
5
Use `mgt-react` to simplify usage of [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) web components in React. The library wraps all mgt components and exports them as React components.
6
6
7
-
`mgt-react` extends [`wc-react`](https://github.com/nmetulev/wc-react) adding support for templates.
8
-
9
7
## Installation
10
8
11
9
```bash
@@ -20,7 +18,7 @@ yarn add @microsoft/mgt-react
20
18
21
19
## Usage
22
20
23
-
Import a component at the top:
21
+
All components are available via the npm package and are named using PascalCase. To use a component, first import it at the top:
24
22
25
23
```tsx
26
24
import { Person } from'@microsoft/mgt-react';
@@ -32,7 +30,7 @@ You can now use `Person` anywhere in your JSX as a regular React component.
32
30
<PersonpersonQuery="me" />
33
31
```
34
32
35
-
### Use properties instead of attributes
33
+
All properties and events map exactly as they are defined in the component documentation - [see web component docs](https://aka.ms/mgt-docs).
36
34
37
35
For example, you can set the `personDetails` property to an object:
All properties and events map exactly as they are defined on the web component - [see web component docs](https://aka.ms/mgt-docs).
64
-
65
-
### Templates
66
-
67
-
`mgt-react` allows you to leverage React for writing templates for mgt components.
67
+
## Templates
68
68
69
-
> Note: You can learn more about [templating mgt components here](https://docs.microsoft.com/graph/toolkit/templates)
69
+
Most Microsoft Graph Toolkit components [support templating](https://docs.microsoft.com/graph/toolkit/customize-components/templates) and `mgt-react` allows you to leverage React for writing templates.
70
70
71
71
For example, to create a template to be used for rendering events in the `mgt-agenda` component, first define a component to be used for rendering an event:
72
72
@@ -93,12 +93,6 @@ const App = (props) => {
93
93
94
94
The `template` prop allows you to specify which template to overwrite. In this case, the `MyEvent` component will be repeated for every event, and the `event` object will be passed as part of the `dataContext` prop.
95
95
96
-
## What components can I use?
97
-
98
-
The library is auto generated from the Microsoft Graph Toolkit and all components are available.
99
-
100
-
The names of the React components are in PascalCase and do not include the `Mgt` prefix. For example, the `mgt-person` component is available as `Person`, and the `mgt-people-picker` component is available as `PeoplePicker`. See the [Microsoft Graph Toolkit documentation](https://aka.ms/mgt-docs) for a list of all components.
101
-
102
96
## Why
103
97
104
98
If you've used web components in React, you know that proper interop between web components and React components requires a bit of extra work.
[](https://dev.azure.com/microsoft-graph-toolkit/microsoft-graph-toolkit/_build/latest?definitionId=1&branchName=main)[](https://www.webcomponents.org/element/@microsoft/mgt)[](https://mgt.dev)
5
+
The Microsoft Graph Toolkit is a collection of reusable, framework-agnostic components and authentication providers for accessing and working with Microsoft Graph. The components are fully functional right of out of the box, with built in providers that authenticate with and fetch data from Microsoft Graph.
7
6
8
-
The Microsoft Graph Toolkit is a collection of web components powered by the Microsoft Graph.
7
+
The `@microsoft/mgt` package brings all mgt packages together (with the exception of `@microsoft/mgt-react`) and bundles them in this one convenient package.
9
8
10
-
Components are functional and work automatically with the Microsoft Graph
11
-
12
-
Components work with any web framework and on all modern browsers. IE 11 is also supported
9
+
[View the full documentation](https://docs.microsoft.com/graph/toolkit/overview)
13
10
14
-
[Here is a quick jsfiddle](https://jsfiddle.net/metulev/9phqxLd5/)
11
+
You can now explore components and samples with the [playground](https://mgt.dev).
12
+
## Components
15
13
16
-
## Components & Documentation
14
+
The Microsoft Graph Toolkit includes a collection of web components for the most commonly built experiences powered by Microsoft Graph APIs.
17
15
18
-
The toolkit currently includes the following components:
16
+
The components are also available as [React components](https://docs.microsoft.com/graph/toolkit/get-started/mgt-react).
[Providers](https://docs.microsoft.com/graph/toolkit/providers) enable authentication and provide the implementation for acquiring access tokens on various platforms and expose a Microsoft Graph Client for calling the Microsoft Graph APIs. The components work best when used with a provider, but the providers can be used on their own.
// alternatively, you can set the provider in code and provide more options
63
-
mgt.Providers.globalProvider = new mgt.MsalProvider({clientId: '[CLIENT-ID]'});
64
-
</script> -->
57
+
<mgt-login></mgt-login>
58
+
<mgt-agenda></mgt-agenda>
65
59
```
66
60
67
61
> NOTE: MSAL requires the page to be hosted in a web server for the authentication redirects. If you are just getting started and want to play around, the quickest way is to use something like [live server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) in vscode.
@@ -74,56 +68,24 @@ The benefits of using MGT through NPM is that you have full control of the bundl
74
68
npm install @microsoft/mgt
75
69
```
76
70
77
-
Now you can reference all components at the page you are using:
The components work best when used with a [provider](https://docs.microsoft.com/graph/toolkit/providers). The provider exposes authentication and Microsoft Graph apis used by the components to call into the Microsoft Graph.
110
-
111
-
The toolkit contains providers for [MSAL](https://docs.microsoft.com/graph/toolkit/providers/msal), [SharePoint](https://docs.microsoft.com/graph/toolkit/providers/sharepoint), and [Teams](https://docs.microsoft.com/graph/toolkit/providers/teams). You can also create your own providers by extending the [IProvider](https://docs.microsoft.com/graph/toolkit/providers/custom) abstract class.
112
-
113
-
## Contribute
114
-
115
-
We enthusiastically welcome contributions and feedback. Please read the [contributing guide](CONTRIBUTING.md) before you begin.
116
-
117
82
## Feedback and Requests
118
83
119
84
For general questions and support, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-graph-toolkit) where questions should be tagged with `microsoft-graph-toolkit`
120
85
121
86
Please use [GitHub Issues](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) for bug reports and feature requests. We highly recommend you browse existing issues before opening new issues.
122
87
123
-
## License
124
-
125
-
All files in this GitHub repository are subject to the [MIT license](https://github.com/OfficeDev/office-ui-fabric-core/blob/master/LICENSE). This project also references fonts and icons from a CDN, which are subject to a separate [asset license](https://static2.sharepointonline.com/files/fabric/assets/license.txt).
126
-
127
-
## Code of Conduct
128
-
129
-
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [[email protected]](mailto:[email protected]) with any additional questions or comments.
0 commit comments