AppExtras component
Contents
AppExtras component#
The AppExtras
component is a general use insertion point for things like
analytics, general purpose code spanning the whole application or third party
services code. AppExtras component inserts will be rendered by the App
component.
How to use it#
You can either use it by overriding it via component shadowing by placing
a custom src/customizations/components/theme/AppExtras/AppExtras.jsx
...
Or you can use the new key of config.settings
, the appExtras
. This is
a list of registrations, each registration is an object with:
match
: Thematch
key is for objects compatible with react-router's matchPath, so it can be either a simple string or a match object.component
. Use thecomponent
to link the component to be used.props
: Extra props to be inject to the actual component used.
For example:
import { settings as defaultSettings } from '@plone/volto/config'
export settings = {
...defaultSettings,
appExtras: [
...defaultSettings.appExtras,
{
match: '',
component: GoogleAnalyticsPing
props: {
'google-tag': '123456'
}
},
{
match: {
path: '/blogs',
exact: true,
},
component: WordClouds
},
{
path: '/blog/**/edit',
component: ExtraToolbarButton,
}
]
}
You can use this to render, for example, <Portal>
components to be inserted
somewhere in the website.