provideComponent(className, component)

Registers a React component for rendering pages or widgets of the given class name.

Copy
Scrivito.provideComponent("Homepage", ({ page }) => (
  <h1>{page.get("title")}</h1>
));

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 examples in which in-place editing is enabled).

Params

  • className (String) – Name of the CMS object or widget class based on Obj or Widget, respectively, e.g. "Homepage" or "TextWidget".
  • component (Function) – A React component. The component instances will receive the Scrivito-specific props: page, params, widget.

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 an example widget. The component renders the text attribute of the widget:

Copy
Scrivito.provideComponent("ExampleWidget", ({ widget }) => (
  <Scrivito.ContentTag content={widget} attribute="text" />
));

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

Copy
Scrivito.provideComponent("SearchResultPage", ({ params }) => (
  <div>
    <h2>
      {`${Scrivito.Obj.where(
        "*",
        "containsPrefix",
        params.term
      ).count()} results`}
    </h2>
    {/* [...Scrivito.Obj.where('*', 'containsPrefix', params.term)].map(...) */}
  </div>
));

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

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

Copy
class PageComponent extends React.Component {
  render() {
    return (
      <Scrivito.ContentTag
        tag="h1"
        content={this.props.page}
        attribute="title"
      />
    );
  }
}

Scrivito.provideComponent("Page", PageComponent);

However, we recommend to use this style only when needed, for example when using state.