New in 1.30.0 [BETA]

provideLayoutComponent(objClass, component)

Registers a React component for rendering the layout for pages of the given class.

Like regular components that can be defined for a page class using Scrivito.provideComponent, layout components are rendered when an instance of the class, i.e. a specific page is to be displayed by Scrivito.CurrentPage. However, if the page to be rendered has a path, Scrivito.CurrentPage additionally renders the layout components of the ancestor pages, if present, beginning at the root object’s layout down to the layout of the current page. Only then, the actual page component, which can be provided optionally using Scrivito.provideComponent, is rendered. Instead of providing such a page component, the page content can also be rendered from within the layout component. See below for an example.

This rendering sequence enables you to implement nested layouts with components specific to the page types and hierarchy levels involved. Since layout components, just like regular components for pages, may include editable content, you can, for example, provide editors with widgets (e.g. navigation widgets) that are aware of the structural environment of the current page.

The example above defines the layout component for the BlogPost class. It renders the layout attribute of the page concerned (in this case, the BlogPost instance) using Scrivito.ContentTag. Then, the Scrivito.CurrentPage component renders the current page using the component provided through Scrivito.provideComponent.

Params

  • objClass (ObjClass) – a CMS object class
  • component (Function) – A React component

Props

  • page (Obj) – The current page if it has the specified object class, or an ancestor of the current page that has this object class

Examples

In the following example, the layout component for the root page is defined. Since the root page is the origin of every page with a path, this layout component is rendered for each and every page in the hierarchy.

The example below defines a layout component that renders both the layout and the content of a page, obviating the need to provide a page component via Scrivito.provideComponent. Rendering the layout and the current page in the same React component allows you, for example, to apply CSS transition effects when the visitor navigates from a page to one of its subpages or vice versa.

The next example illustrates how you can use React.Context in your layout components to pass any value, e.g. a theme name, from a parent page down to any direct or indirect subpage, eliminating the need to use props and pass them through all the hierarchy levels in between. React.Context comes in handy if, for example, you are using homepage attributes to manage site properties and want to apply them wherever suitable in the hierarchy.

In this example, the theme attribute of the Homepage instance determines the style of Page components.