SPFX Service Scopes Hooks
This fork takes the great example provided by @garrytrinder (who forked and added "full hooks" to the great example provided by @vrdmn) and adds useWebPartContext
React hook to simplify working with SPFx web part properties on any level deep in the React components tree.
How to use
- Change top level React render so that it injects current web part context via React Context:
const element: React.ReactElement = React.createElement( AppContext.Provider, { value: this.context }, React.createElement(HelloWorld, { description: this.properties.description }) );
- Use
useWebPartContext
hook in any child component (it preserves type checking). Use only subset of properties if you don't need the whole context (good for unit testing):const ctx = useWebPartContext(context => ({ webPartId: context.instanceId, loginName: context.pageContext.user.loginName, msGraphClientFactory: context.serviceScope.consume(MSGraphClientFactory.serviceKey) }));