connect(component, options?)

Returns a new React class component that is connected to Scrivito.

Accepts either a functional component or a class component. The new component is connected to Scrivito in the sense that it automatically loads the required data from the Scrivito backend and automatically updates when new data becomes available.

Params

  • component (Function | Component) – The component which can be either a rendering function or a React component class.
  • [New in 1.40.0]options (optional) (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.

Returns

The React component.

Example

The easiest way to create a connected component is to pass a rendering function to connect, optionally taking an argument representing the component’s props:

Alternatively, you can pass in a React component class. However, we recommend using functional components.

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

Connecting a class component hierarchy

For class components, the returned connected class is not supposed to be a parent class of another component, meaning that the following will not work properly:

In order to fix this, the child component must inherit directly from an unconnected parent component and not from its connected version.