vman

import * as React from 'react';
import { ServiceScope } from '@microsoft/sp-core-library';
import { withServiceScope } from '../common/withServiceScope';
import { MSGraphClientFactory, MSGraphClient } from '@microsoft/sp-http';

interface IHelloUserProps {
    serviceScope: ServiceScope;
}

interface IHelloUserState {

vman

using Microsoft.Graph;
using Microsoft.Identity.Client;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http.Headers;
using System.Threading.Tasks;

namespace Graph.SPO.Thumbnails
{

vman

https://graph.microsoft.com/v1.0/sites/your-site-id/lists/Site%20Pages/drive/root:/MySPOModernPage.aspx:?expand=thumbnails&select=thumbnails/large

vman

import * as React from 'react';
import { IHelloWorldProps } from './IHelloWorldProps';

import { CustomOfficeUiFabricLibrary, ButtonComponent } from 'spfx-lib-ouifr';

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  
  private myInstance;
  
  constructor(props){

vman

export { CustomOfficeUiFabricLibrary } from './libraries/customOfficeUiFabric/CustomOfficeUiFabricLibrary';
export { ButtonComponent } from './libraries/customOfficeUiFabric/ButtonComponent';

vman

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "custom-office-ui-fabric-library": {
      "components": [
        {
          "entrypoint": "./lib/index.js",
          "manifest": "./src/libraries/customOfficeUiFabric/CustomOfficeUiFabricLibrary.manifest.json"
        }

vman

import * as React from 'react';
import { DefaultButton, Label, PrimaryButton } from 'office-ui-fabric-react';

interface IButtonComponentProps {
  primaryButtonText: string;
  defaultButtonText: string;
}

export class ButtonComponent extends React.Component<IButtonComponentProps, {}> {
  public render(): JSX.Element {

vman

Originally posted by @octogonz (Microsoft) in Sep 2016 as a result of discussion on this issue.

---

We received some questions about the ServiceScope API, which is SPFx's implementation of the service locator pattern. This tech note provides some guidance for when/how to use this API.

What is a "service"?

vman

const counterServiceInstance: ICounterService = this.context.serviceScope.consume(CounterService.serviceKey);

const currentCounterValue : string = `Current counter value: ${counterServiceInstance.increaseAndReturnCount()}`;

this.domElement.getElementsByClassName("counterValue")[0].textContent = currentCounterValue;

vman

gulp serve