Learn how Scrivito CMS can help you deliver amazing digital experiences
See Scrivito CMS in action

provideComponent(className, component)

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

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).


  • 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.


  • 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.


Provide a component for an example widget. The component renders the text attribute of the widget:

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:

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:

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.