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.

Details

The easiest way to create such a component is to pass a rendering function to it that optionally takes an argument representing the component's props:

Copy
function Headline(props) {
  return (
    <div className={ props.className }>
      { props.page.get("headlineText") }
    </div>
  );
}

export default Scrivito.connect(Headline);

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:

Copy
class StickyNav extends React.Component {  
  constructor(props) {  
    super(props);

    // Initially, the navigation should not be "sticky"
    this.state = {
      isSticky: false,
    };
  }

  componentDidMount() {
    window.addEventListener('scroll', this. _onWindowScroll);
  }

  componentWillUnmount() {    
    window.removeEventListener('scroll', this._onWindowScroll); 
  }

  // Render the navigation e.g. using "Scrivito.ChildListTag", so that
  // it automatically loads the required data from the Scrivito backend 
  // and automatically updates when new data becomes available.

  render() {
    if (this.state.isSticky) {
      // Render "sticky"
    } else {
      // Render normal  
    }  
  }

  _onWindowScroll(event) {      
    const offset = event.currentTarget.pageYOffset;
    this.setState({ isSticky: this._shouldBecomeSticky(offset) });       
  }

  _shouldBecomeSticky(offset) {
    // Check if the navigation should become "sticky"  
  }
}

export default Scrivito.connect(StickyNav);

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:

Copy
// src/ParentComponent.js

class ParentComponent extends React.Component {
  render() {
    // ....
  }
}

export default Scrivito.connect(ParentComponent);
Copy
// src/ChildComponent.js

// Attention: Importing a connected class!
import ConnectedParentComponent from './ParentComponent.js';

// Inheriting from a connected component will not work properly!
class ChildComponent extends ConnectedParentComponent {
  render() {
    // ...
  }
}

export default Scrivito.connect(ChildComponent);

In order to fix this, ChildComponent must inherit directly from ParentComponent and not from its connected version:

Copy
// src/ParentComponent.js

// Export the not connected class
export class ParentComponent extends React.Component {
  render() {
    // ....
  }
}

export default Scrivito.connect(ParentComponent);
Copy
// src/ChildComponent.js

// Import the not connected parent class
import { ParentComponent } from './ParentComponent.js';

class ChildComponent extends ParentComponent {
  render() {
    // ...
  }
}

export default Scrivito.connect(ChildComponent);