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