Is there a utility built into SPFx or a React library to change what to render based on if the page is in read or edit mode?

Or more exactly, a way to switch the rendering when switching between read and edit mode.

How to tell if page is in view/edit mode in SPFx?


I am trying to display an edit version of an SPFx Extension when the Site page is in Edit mode. I would like to display other information when the page is in Read mode.

I can get everything to render correctly on initial page load, but toggling between read/edit after that doesn't change anything.

Attempted Solutions:

The closest I've gotten is by using History and having my component re-render on URL change using:

history.listen(() => this.forceUpdate());

I tried this in conjunction with react-url-query, but it doesn't seem that history.listen() is firing when going back-and-forth between read/edit modes even though the URL is updating.

Additional Notes:

I am NOT currently using either Redux or react-router. I'm not sure if using those would help get me what I'm looking for or if this is more of a SharePoint issue.

The modern pages are built with React, is there a way I can use the same state to tell what mode the page is in?

1 Answer 1


In the context of modern pages, you can override the webpart's onDisplayModeChanged method. However, according to the docs, as long as you do your display mode handling in the render method, it should just work.

From the source code (@v1.5.1):

 * This event method is called when the display mode of a web part is changed.
 * @remarks
 * The default implementation of this API calls
 * the web part render method to re-render the web part with the new display mode. If a web part developer does not
 * want a full re-render to happen on display mode change, they can override this API and perform specific updates
 * to the web part DOM to switch its display mode.
 * @param oldDisplayMode - The old display mode.
protected onDisplayModeChanged(oldDisplayMode: DisplayMode): void;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.