provideComponent(nameOrClass, component, options)

Registers a React component for rendering pages or widgets of the given class name, CMS object or widget class.

In the example above, a component is defined for rendering homepages, i.e. instances of the Homepage class. The actual page instance is passed in as the page prop. The component simply renders the title attribute of the homepage, without making it editable in-place (see below for an example in which in-place editing is enabled).

Params

  • nameOrClass (String or ObjClass or WidgetClass) – Name of the CMS object or widget class (String) based on Obj or Widget, respectively, e.g. Homepage or TextWidget.
    [New in 1.28.0]Alternatively, a CMS object or widget class can be passed in directly.
  • component (Function | Component) – A React functional or class component. The component instances will receive the Scrivito-specific props: page, params, widget.
  • [New in 1.40.0]options (Object) – Lets you provide a React component via the loading option. If specified, the provided component is rendered while the data of the actual component is being loaded. See the example below.

Props

  • params (Object) – If the URL for rendering the current page includes query parameters, they are passed in as the params JavaScript object. This prop is set for content classes based on Obj. Also, params is only available if the path routing method has been set for the app.

Props for content classes based on Obj

  • page (Obj) – The current page.

Props for content classes based on Widget

  • widget (Widget) – A widget instance of the specified class.
  • Any valid props specified via widgetProps in a Scrivito.ContentTag will also be available here.


Examples

Provide a component for a widget class referenced by its name. The component renders the text attribute of the widget:

[New in 1.28.0]A CMS object or widget class can also be passed in directly:

Register a component for a search result page, showing the number of hits for the query parameter, term:

The examples above passes the component as a rendering function. This is the recommended way to specify components for content classes.

Alternatively, you can pass a class component to provideComponent. The class must be a subclass of React.Component:

[New in 1.40.0]Furthermore, you can specify a loading component, e.g., a spinner, that renders itself while the actual component loads its data. In the example below, a component from the react-spinners library is used.