component above and is consumed using the useContext React Hook */
+ const { serviceScope } = useContext(AppContext);
+
+ /* Executes once on componentMount */
+ useEffect(() => {
+
+ /* Create a Microsoft Graph client factory using the serviceScope provided by AppContext */
+ const msGraphClientFactory = serviceScope.consume(MSGraphClientFactory.serviceKey);
+
+ /* Create Microsoft Graph Client from factory and call "Me" endpoint */
+ msGraphClientFactory.getClient()
+ .then((client: MSGraphClient): void => {
+ client
+ .api('/me')
+ .get((error, user: any, rawResponse?: any) => {
+
+ /* Update state by calling update function passing the new state value */
+ setName(user.displayName);
+ });
+ });
+
+ }, []);
+
+ /* Display name when state value has been set */
+ return (
+
+ {name &&
+ Hello {name}
+ }
+
+ );
+};
+
+export default HelloUser;
\ No newline at end of file
diff --git a/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/components/HelloWorld.module.scss b/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/components/HelloWorld.module.scss
new file mode 100644
index 000000000..e7e3094c3
--- /dev/null
+++ b/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/components/HelloWorld.module.scss
@@ -0,0 +1,74 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+
+.helloWorld {
+ .container {
+ max-width: 700px;
+ margin: 0px auto;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+ }
+
+ .row {
+ @include ms-Grid-row;
+ @include ms-fontColor-white;
+ background-color: $ms-color-themeDark;
+ padding: 20px;
+ }
+
+ .column {
+ @include ms-Grid-col;
+ @include ms-lg10;
+ @include ms-xl8;
+ @include ms-xlPush2;
+ @include ms-lgPush1;
+ }
+
+ .title {
+ @include ms-font-xl;
+ @include ms-fontColor-white;
+ }
+
+ .subTitle {
+ @include ms-font-l;
+ @include ms-fontColor-white;
+ }
+
+ .description {
+ @include ms-font-l;
+ @include ms-fontColor-white;
+ }
+
+ .button {
+ // Our button
+ text-decoration: none;
+ height: 32px;
+
+ // Primary Button
+ min-width: 80px;
+ background-color: $ms-color-themePrimary;
+ border-color: $ms-color-themePrimary;
+ color: $ms-color-white;
+
+ // Basic Button
+ outline: transparent;
+ position: relative;
+ font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+ -webkit-font-smoothing: antialiased;
+ font-size: $ms-font-size-m;
+ font-weight: $ms-font-weight-regular;
+ border-width: 0;
+ text-align: center;
+ cursor: pointer;
+ display: inline-block;
+ padding: 0 16px;
+
+ .label {
+ font-weight: $ms-font-weight-semibold;
+ font-size: $ms-font-size-m;
+ height: 32px;
+ line-height: 32px;
+ margin: 0 4px;
+ vertical-align: top;
+ display: inline-block;
+ }
+ }
+}
diff --git a/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/components/HelloWorld.tsx b/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/components/HelloWorld.tsx
new file mode 100644
index 000000000..51580d8bd
--- /dev/null
+++ b/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/components/HelloWorld.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ServiceScope } from '@microsoft/sp-core-library';
+import { IHelloWorldProps } from './IHelloWorldProps';
+import AppContext from '../common/AppContext';
+import HelloUser from "./HelloUser";
+
+const HelloWorld: React.FunctionComponent = (props: { serviceScope: ServiceScope; }) =>
+
+ /* Context is designed to share data that can be considered “global” for a tree of React components.
+ Set the AppContext value to pass in the serviceScope property which can be consumed by child components */
+
+
+ Consuming SPFX Service Scopes using React Hooks
+
+
+
+
+ ;
+
+export default HelloWorld;
\ No newline at end of file
diff --git a/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/components/IHelloWorldProps.ts b/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/components/IHelloWorldProps.ts
new file mode 100644
index 000000000..a40cc0849
--- /dev/null
+++ b/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/components/IHelloWorldProps.ts
@@ -0,0 +1,6 @@
+import { ServiceScope } from '@microsoft/sp-core-library';
+
+export interface IHelloWorldProps {
+ description: string;
+ serviceScope: ServiceScope;
+}
diff --git a/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/loc/en-us.js b/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/loc/en-us.js
new file mode 100644
index 000000000..e5f5a6025
--- /dev/null
+++ b/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/loc/en-us.js
@@ -0,0 +1,7 @@
+define([], function() {
+ return {
+ "PropertyPaneDescription": "Description",
+ "BasicGroupName": "Group Name",
+ "DescriptionFieldLabel": "Description Field"
+ }
+});
\ No newline at end of file
diff --git a/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/loc/mystrings.d.ts b/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/loc/mystrings.d.ts
new file mode 100644
index 000000000..02ac594b6
--- /dev/null
+++ b/samples/react-functional-servicescope-hooks/src/webparts/helloWorld/loc/mystrings.d.ts
@@ -0,0 +1,10 @@
+declare interface IHelloWorldWebPartStrings {
+ PropertyPaneDescription: string;
+ BasicGroupName: string;
+ DescriptionFieldLabel: string;
+}
+
+declare module 'HelloWorldWebPartStrings' {
+ const strings: IHelloWorldWebPartStrings;
+ export = strings;
+}
diff --git a/samples/react-functional-servicescope-hooks/teams/216d3c26-ed6d-4402-ba29-1e7ae3a121bc_color.png b/samples/react-functional-servicescope-hooks/teams/216d3c26-ed6d-4402-ba29-1e7ae3a121bc_color.png
new file mode 100644
index 000000000..a8d279707
Binary files /dev/null and b/samples/react-functional-servicescope-hooks/teams/216d3c26-ed6d-4402-ba29-1e7ae3a121bc_color.png differ
diff --git a/samples/react-functional-servicescope-hooks/teams/216d3c26-ed6d-4402-ba29-1e7ae3a121bc_outline.png b/samples/react-functional-servicescope-hooks/teams/216d3c26-ed6d-4402-ba29-1e7ae3a121bc_outline.png
new file mode 100644
index 000000000..6df4a038d
Binary files /dev/null and b/samples/react-functional-servicescope-hooks/teams/216d3c26-ed6d-4402-ba29-1e7ae3a121bc_outline.png differ
diff --git a/samples/react-functional-servicescope-hooks/tsconfig.json b/samples/react-functional-servicescope-hooks/tsconfig.json
new file mode 100644
index 000000000..72ce74214
--- /dev/null
+++ b/samples/react-functional-servicescope-hooks/tsconfig.json
@@ -0,0 +1,38 @@
+{
+ "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
+ "compilerOptions": {
+ "target": "es5",
+ "forceConsistentCasingInFileNames": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "jsx": "react",
+ "declaration": true,
+ "sourceMap": true,
+ "experimentalDecorators": true,
+ "skipLibCheck": true,
+ "outDir": "lib",
+ "inlineSources": false,
+ "strictNullChecks": false,
+ "noUnusedLocals": false,
+ "typeRoots": [
+ "./node_modules/@types",
+ "./node_modules/@microsoft"
+ ],
+ "types": [
+ "es6-promise",
+ "webpack-env"
+ ],
+ "lib": [
+ "es5",
+ "dom",
+ "es2015.collection"
+ ]
+ },
+ "include": [
+ "src/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules",
+ "lib"
+ ]
+}
diff --git a/samples/react-functional-servicescope-hooks/tslint.json b/samples/react-functional-servicescope-hooks/tslint.json
new file mode 100644
index 000000000..6bfc75a4c
--- /dev/null
+++ b/samples/react-functional-servicescope-hooks/tslint.json
@@ -0,0 +1,30 @@
+{
+ "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+ "rules": {
+ "class-name": false,
+ "export-name": false,
+ "forin": false,
+ "label-position": false,
+ "member-access": true,
+ "no-arg": false,
+ "no-console": false,
+ "no-construct": false,
+ "no-duplicate-variable": true,
+ "no-eval": false,
+ "no-function-expression": true,
+ "no-internal-module": true,
+ "no-shadowed-variable": true,
+ "no-switch-case-fall-through": true,
+ "no-unnecessary-semicolons": true,
+ "no-unused-expression": true,
+ "no-use-before-declare": true,
+ "no-with-statement": true,
+ "semicolon": true,
+ "trailing-comma": false,
+ "typedef": false,
+ "typedef-whitespace": false,
+ "use-named-parameter": true,
+ "variable-name": false,
+ "whitespace": false
+ }
+}
\ No newline at end of file
diff --git a/samples/react-functional-servicescope-hooks/webpart.png b/samples/react-functional-servicescope-hooks/webpart.png
new file mode 100644
index 000000000..c30038347
Binary files /dev/null and b/samples/react-functional-servicescope-hooks/webpart.png differ