History

Hugo Bernier bc3bdf4093 Fixed global search and replace error		2021-11-07 00:52:25 -04:00
..
assets	Changed from updated to modificationDateTime	2021-05-02 15:39:42 -04:00
config	New Sample: Consuming SPFX Service Scopes using React Hooks	2020-03-25 23:59:33 +00:00
src	New Sample: Consuming SPFX Service Scopes using React Hooks	2020-03-25 23:59:33 +00:00
teams	New Sample: Consuming SPFX Service Scopes using React Hooks	2020-03-25 23:59:33 +00:00
README.md	Fixed global search and replace error	2021-11-07 00:52:25 -04:00
gulpfile.js	New Sample: Consuming SPFX Service Scopes using React Hooks	2020-03-25 23:59:33 +00:00
package-lock.json	New Sample: Consuming SPFX Service Scopes using React Hooks	2020-03-25 23:59:33 +00:00
package.json	New Sample: Consuming SPFX Service Scopes using React Hooks	2020-03-25 23:59:33 +00:00
tsconfig.json	New Sample: Consuming SPFX Service Scopes using React Hooks	2020-03-25 23:59:33 +00:00
tslint.json	New Sample: Consuming SPFX Service Scopes using React Hooks	2020-03-25 23:59:33 +00:00
webpart.png	New Sample: Consuming SPFX Service Scopes using React Hooks	2020-03-25 23:59:33 +00:00

README.md

Consuming SPFx Service Scopes using React Hooks

Summary

This web part is designed to help developers understand how to use the Context API and useContext() React Hook to share global data between a hierarchy of nested React components. In this example, a Service Scope is shared globally that components can consume to call the Microsoft Graph, it also uses Functional Components replacing the more commonly seen Class Component approach.

Compatibility

Applies to

Solution

Solution	Author(s)
react-functional-servicescope-hooks	Garry Trinder

Version history

Version	Date	Comments
1.0	March 25, 2020	Initial release

Minimal Path to Awesome

Clone this repository
Move to /samples/react-functional-servicescope-hooks folder
At the command line run:
- npm install
- gulp bundle --ship && gulp package-solution --ship
Upload react-functional-servicescope-hooks.sppkg to App Catalog site collection from sharepoint/solution folder
Deploy package
Go to SharePoint API Management screen in SharePoint Admin Center
Approve User.ReadBasic.All permission for Microsoft Graph
At the command line run:
- gulp serve
Navigate to remote workbench https://tenant.sharepoint.com/_layouts/15/workbench.aspx
Add HelloWorld web part to the workbench

Features

This sample demonstrates how

Functional Components can be used to replace Class Components, simplifying the codebase
useEffect() React Hooks can replace componentDidMount() lifecycle method
useState() React Hook can replace the use of this.setState() to update local component state

This Web Part illustrates the following concepts on top of the SharePoint Framework:

React Hooks
React Context API
Functional Components

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Help

We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.

You can try looking at issues related to this sample to see if anybody else is having the same issues.

You can also try looking at discussions related to this sample and see what the community is saying.

If you encounter any issues while using this sample, create a new issue.

For questions regarding this sample, create a new question.

Finally, if you have an idea for improvement, make a suggestion.