Detect SharePoint Framework Environment & Display Mode

To detect the environment or display mode in that a SharePoint framework webpart is running in, we need to use the @microsoft/sp-core-library library.

Detect SharePoint environment

To determine the environment your webpart is running in, you can use the code below.

import { Environment, EnvironmentType, DisplayMode } from '@microsoft/sp-core-library';

if(Environment.type == EnvironmentType.ClassicSharePoint){
  //Classic SharePoint page
}
else if(Environment.type === EnvironmentType.Local){
  //Workbenck page
}
else if(Environment.type === EnvironmentType.SharePoint){
  //Modern SharePoint page 
}
else if(Environment.type === EnvironmentType.Test){
  //Running on Unit test enveironment 
}

The table below explains each environment type.

Detect Display Mode

To detect the mode i.e. edit or view mode on a modern page, use

//Detect display mode on modern pages
if(this.displayMode == DisplayMode.Edit){
    //Modern SharePoint in Edit Mode
}
else if(this.displayMode == DisplayMode.Read){
    //Modern SharePoint in Read Mode
}

On a classic page, there is no property from the @microsoft/sp-core-library to help us.

let interval: any;
interval = setInterval(function() {
    if (typeof( < any > window).SP.Ribbon !== 'undefined') {
        let isInEditMode = ( < any > window).SP.Ribbon.PageState.Handlers.isInEditMode();
        if (isInEditMode) {
            //Classic SharePoint in Edit Mode
        } else {
            //Classic SharePoint in Read Mode
        }
        clearInterval(interval);
    }
}, 100)