@spteck/react-controls-v2-spfx-adapter

SPFx adapter package for @spteck/react-controls-v2. This package allows you to use the universal React controls library in SharePoint Framework (SPFx) applications.

Installation

npm install @spteck/react-controls-v2 @spteck/react-controls-v2-spfx-adapter

Usage

Basic Setup in SPFx WebPart

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { UniversalProvider } from '@spteck/react-controls-v2';
import { SPFxContextAdapter } from '@spteck/react-controls-v2-spfx-adapter';

export default class MyWebPart extends BaseClientSideWebPart {
  public render(): void {
    // Convert SPFx context to Universal context
    const universalContext = SPFxContextAdapter.adapt(
      this.context,
      'MyWebPart' // Component name for logging
    );
    
    const element = (
      <UniversalProvider context={universalContext}>
        <MyComponent />
      </UniversalProvider>
    );
    
    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }
}

What the Adapter Provides

The SPFxContextAdapter automatically provides:

• Graph Client: Uses SPFx's MSGraphClientV3 for Microsoft Graph API calls
• Authentication Provider: Uses SPFx's AAD Token Provider
• Page Context: Converts SPFx page context to universal format
• Logging Provider: SPFx-compatible logging

Accessing Context in Components

import { useApplicationContext } from '@spteck/react-controls-v2';

function MyComponent() {
  const context = useApplicationContext();
  
  // Access user info
  const user = context?.pageContext?.user;
  console.log(user?.displayName);
  
  // Access site info
  const site = context?.pageContext?.site;
  console.log(site?.absoluteUrl);
  
  return <div>Welcome, {user?.displayName}!</div>;
}

Using Graph API in SPFx

import { useGraphAPI } from '@spteck/react-controls-v2';

function UserProfile() {
  const { getUser, getCurrentUser } = useGraphAPI();
  const [user, setUser] = React.useState(null);
  
  React.useEffect(() => {
    getCurrentUser().then(setUser);
  }, []);
  
  return <div>{user?.displayName}</div>;
}

API Reference

SPFxContextAdapter.adapt()

SPFxContextAdapter.adapt(
  spfxContext: BaseComponentContext,
  componentName?: string
): IApplicationContext

Parameters:

• spfxContext: The SPFx BaseComponentContext from your web part or extension
• componentName (optional): Name for logging purposes. Default: 'SPFx Component'

Returns: IApplicationContext compatible with all universal controls

License

MIT © João Mendes