The SPA front-end helper libraries provide APIs that can inform you about the status of the current renderer context of a SPA page. The status An SPA page can be running in:
- A production environment.
- The Pages editor.
- Page preview mode.
Being aware of the current renderer context can be useful if you need to hit different URLs for content, do rendering or other things conditionally. The APIs provide context status functions for Angular and React.
Angular
To find out about the editor/preview status, inject the RendererContextService
from the @magnolia/angular-renderer
. You can then call the following functions:
RendererContextService#inEditor() # Tell SPA is in editor or not inEditorPreview() # Tell SPA is in editor and in preview mode
To get the current status of the dev mode, call the isDevMode()
function that is part of the @angular/core
library. If the dev mode is enabled, you can see the comment when inspect the DOM element when running in node dev server.
React
In React, make sure that you import {RendererContext}
from the @magnolia/react-renderer
and that the class of YourComponent
extends the React.Component
.
After assigning static contextType = RendererContext
you may call the following functions:
this.context.inEditor # Tell SPA is in editor or not this.context.inEditorPreview # Tell SPA is in editor and in preview mode this.context.isDevMode # is in dev mode or not