Skip to content

Commit 4ce777b

Browse files
shweaver-MSFTshweaver-MSFT
committed
Copied README from root over to MGT folder
1 parent 97b7cfa commit 4ce777b

File tree

1 file changed

+129
-0
lines changed

1 file changed

+129
-0
lines changed

‎packages/mgt/README.md‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
# Microsoft Graph Toolkit
2+
3+
<img align="left" height="150" src="https://github.com/microsoftgraph/microsoft-graph-toolkit/raw/main/assets/graff.png" title="Graff the Giraffe">
4+
5+
[![NPM](https://img.shields.io/npm/v/@microsoft/mgt.svg)](https://www.npmjs.com/package/@microsoft/mgt) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/microsoftgraph/msgraph-sdk-javascript) [![stackoverflow](https://img.shields.io/stackexchange/stackoverflow/t/microsoft-graph-toolkit.svg)](https://stackoverflow.com/questions/tagged/microsoft-graph-toolkit)
6+
[![Build Status](https://dev.azure.com/microsoft-graph-toolkit/microsoft-graph-toolkit/_apis/build/status/microsoftgraph.microsoft-graph-toolkit?branchName=main)](https://dev.azure.com/microsoft-graph-toolkit/microsoft-graph-toolkit/_build/latest?definitionId=1&branchName=main) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@microsoft/mgt) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/main/badge/badge-storybook.svg?sanitize=true)](https://mgt.dev)
7+
8+
The Microsoft Graph Toolkit is a collection of web components powered by the Microsoft Graph.
9+
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
13+
14+
[Here is a quick jsfiddle](https://jsfiddle.net/metulev/9phqxLd5/)
15+
16+
## Components & Documentation
17+
18+
The toolkit currently includes the following components:
19+
20+
* [mgt-login](https://docs.microsoft.com/graph/toolkit/components/login)
21+
* [mgt-person](https://docs.microsoft.com/graph/toolkit/components/person)
22+
* [mgt-person-card](https://docs.microsoft.com/graph/toolkit/components/person-card)
23+
* [mgt-people](https://docs.microsoft.com/graph/toolkit/components/people)
24+
* [mgt-people-picker](https://docs.microsoft.com/graph/toolkit/components/people-picker)
25+
* [mgt-agenda](https://docs.microsoft.com/graph/toolkit/components/agenda)
26+
* [mgt-tasks](https://docs.microsoft.com/graph/toolkit/components/tasks)
27+
* [mgt-get](https://docs.microsoft.com/graph/toolkit/components/get)
28+
* [mgt-teams-channel-picker](https://docs.microsoft.com/en-us/graph/toolkit/components/teams-channel-picker)
29+
30+
And the following providers:
31+
32+
* [Msal Provider](https://docs.microsoft.com/graph/toolkit/providers/msal)
33+
* [SharePoint Provider](https://docs.microsoft.com/graph/toolkit/providers/sharepoint)
34+
* [Teams Provider](https://docs.microsoft.com/graph/toolkit/providers/teams)
35+
* [Proxy Provider](https://docs.microsoft.com/graph/toolkit/providers/proxy)
36+
* [Simple Provider](https://docs.microsoft.com/graph/toolkit/providers/custom)
37+
38+
[View the full documentation](https://docs.microsoft.com/graph/toolkit/overview)
39+
40+
You can now explore components and samples with the [playground](https://mgt.dev) powered by storybook.
41+
42+
## Getting Started
43+
44+
[Watch the Getting Started Video](https://www.youtube.com/watch?v=oZCGb2MMxa0)
45+
46+
You can use the components by referencing the loader directly (via unpkg), or installing the npm package
47+
48+
### Use via mgt-loader:
49+
50+
```html
51+
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
52+
```
53+
54+
You can then start using the components in your html page. Here is a full working example with the Msal provider:
55+
56+
```html
57+
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
58+
<mgt-msal-provider client-id="[CLIENT-ID]"></mgt-msal-provider>
59+
<mgt-login></mgt-login>
60+
61+
<!-- <script>
62+
// alternatively, you can set the provider in code and provide more options
63+
mgt.Providers.globalProvider = new mgt.MsalProvider({clientId: '[CLIENT-ID]'});
64+
</script> -->
65+
```
66+
67+
> 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.
68+
69+
### Use via NPM:
70+
71+
The benefits of using MGT through NPM is that you have full control of the bundling process and you can bundle only the code you need for your site. First, add the npm package:
72+
73+
```bash
74+
npm install @microsoft/mgt
75+
```
76+
77+
Now you can reference all components at the page you are using:
78+
79+
```html
80+
<script src="node_modules/@microsoft/mgt/dist/es6/components.js"></script>
81+
```
82+
83+
Or, just reference the component you need and avoid loading everything else:
84+
85+
```html
86+
<script src="node_modules/@microsoft/mgt/dist/es6/components/mgt-login/mgt-login.js"></script>
87+
```
88+
89+
Similarly, to add a provider, you can add it as a component:
90+
91+
```html
92+
<script src="node_modules/@microsoft/mgt/dist/es6/components/providers/mgt-msal-provider.js"></script>
93+
94+
<mgt-msal-provider client-id="[CLIENT-ID]"></mgt-msal-provider>
95+
```
96+
97+
or, add it in your code:
98+
99+
```html
100+
<script type="module">
101+
import { Providers, MsalProvider } from '@microsoft/mgt';
102+
103+
Providers.globalProvider = new MsalProvider({ clientId: '[CLIENT-ID]' });
104+
</script>
105+
```
106+
107+
## Providers
108+
109+
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+
## Feedback and Requests
118+
119+
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+
121+
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+
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

Comments
 (0)