AppExtras component
Contents
AppExtras component#
Changed in version 17.11.6: Added the ignore
property.
Changed in version 16.30.3: Added the ignore
property.
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'smatchPath
. It can be either a string or amatch
object.ignore
: Theignore
key is for routes compatible with the react-router'smatchPath
property, and ignores all the results in theignore
rule. It can be either a string or amatch
object.component
. Use thecomponent
to link the component to be used.props
: Extra props to be injected into 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,
},
{
match: {
match: '/frontpage',
ignore: '/frontpage/images',
},
component: FrontPage
},
]
}
The above example will apply the rules to their respective routes.
Insert a Google Analytics tag everywhere.
Insert the
WordClouds
component to the/blogs
route.Insert the
ExtraToolbarButton
component when editing objects under the path/blog/**/edit
.Insert the
FrontPage
component to thefrontpage
route, except under/frontpage/images
.