Test your website performance for free
Test your website performance

connect(component)

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) - The component which can be either a rendering function or a React component class.

Returns

The React component. Note that the returned React class component is not supposed to be subclassed. See the Connected components and inheritance section for further details.

Example

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

This is the style we recommend when writing components that do not require state.

Connecting a component class

Alternatively, you can pass in a React component class (including lifecycle methods, e.g. componentWillMount, componentDidMount or componentWillReceiveProps). However, we recommend to use this style only when needed, for example when using state.

Here’s an excerpt of a real-life implementation of a navigation that sticks to a specific area while scrolling the page up and down. The component switches this behavior on and off (by changing the CSS “position” value from “static” to ”fixed”), depending on the scroll position:

Note that in both cases, a stateful React component class is generated.

Connected components and inheritance

When using Scrivito.connect, the returned connected class is not supposed to be a parent class of another component, i.e. 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: