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.
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.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. 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.
[New in 1.40.0]Furthermore, you can specify a loading component, e.g., a spinner, that renders itself while the actual component loads its data. In the example below, a component from the react-spinners library is used.
Alternatively, you can pass in a React component class (including lifecycle methods, e.g. componentWillMount, componentDidMount or componentWillReceiveProps). However, we recommend using functional components.
When connecting a component hierarchy, i.e., components making use of other components, only the topmost component should be connected by means of Scrivito.connect, i.e. there cannot be multiple calls to Scrivito.connect in a component hierarchy.
Furthermore, for class components, 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.